【備忘録】gulp環境構築

自学でコーディングしたいときに、いつも「どうやるんだっけ、、」となって効率が悪いので備忘録としてまとめることにしました。

導入したいタスク

• sass
• es2015

gulpfileをes2015で記述する

babelをインストール

yarn add babel --dev

package.jsonにpresetsを書く

"babel": {
    "presets": [
      "env"
    ]
  }

あとはgulpfile.babel.jsに設定をes2015でかける

sass

gulp.sassをインストール

yarn add gulp.sass --dev

設定

gulp.task('sass', () => {
   gulp.src(['./src/**/*.scss', '!./src/**/_*.scss'])
       .pipe(plumber())
       .pipe(sourcemaps.init())
       .pipe(sass({outputStyle: 'compressed'}))
       .pipe(gulp.dest('./build'))
});

babel

gulp.babelをインストール

yarn add gulp-babel babel-core babel-preset-env --dev

設定

gulp.task('babel', () => {
   gulp.src('./src/**/*.js')
       .pipe(plumber())
       .pipe(sourcemaps.init())
       .pipe(babel({
           presets: ['env']
       }))
       .pipe(gulp.dest('./build'))
});

watchとdefaultの設定

gulp.task('watch', ['sass', 'babel'], () => {
    gulp.watch('./src/**', ['sass', 'babel'])
});

gulp.task('default', ['watch']);