4、gulp.dest() 指向的目錄不存在，會被建立

JS壓縮、合併、重新命名

let gulp = require('gulp');
let concat = require('gulp-concat');  // 合併
let uglify = require('gulp-uglify');  // 壓縮
let rename = require('gulp-rename');  // 重新命名
let jshint = require('gulp-jshint');  // 注意需要同時安裝 jshint

gulp.task('scripts', function() {  // 這個任務的名稱是 scripts
  gulp.src('src/js/*.js')  // 將 src/js/ 目錄下的所有 js 檔案合併
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('all.js'))  // 指定合併後的檔名為 all.js
    .pipe(gulp.dest('dist/js/'))  // 儲存合併後的檔案
    .pipe(uglify())  // 壓縮
    // .pipe(rename('all.min.js'))  // 重新命名
    .pipe(rename({suffix: '.min'}))  // 和上一行等效
    .pipe(gulp.dest('dist/js/'));
})
 

let gulp = require('gulp');
let sass = require('gulp-sass');  // sass -> css
let prefixer = require('gulp-autoprefixer');  // 增加字首
let minify = require('gulp-minify-css');  // css 壓縮
let notify = require('gulp-notify');  // 列印提醒語句
let concat = require('gulp-concat');  // 合併

// 編譯Sass
gulp.task('css', function() {  // 任務名
  gulp.src('sass/*.scss')  // 目標 sass 檔案
    .pipe(sass())  // sass -> css
    .pipe(prefixer('last 2 versions'))  // 引數配置參考 <https://github.com/ai/browserslist>
    .pipe(minify())  // 壓縮
    .pipe(gulp.dest('css'))  // 目標目錄
    .pipe(notify({message: 'done'}))
    .pipe(concat('all.min.css'))  // 合併
    .pipe(gulp.dest('css'));  // 目標目錄
});
 

let gulp = require('gulp');
let imagemin = require('gulp-imagemin');
let cache = require('gulp-cache');  // 減少重複壓縮

gulp.task('images', function() {
  gulp.src('src/images/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images/'));
});
 

注意先要用 gulp watch 開啟監聽，或者直接將 watch 任務設定為 default 的依賴

gulp.task('watch', function() {  // 指定任務名為 watch
  // 監控 a.scss 檔案，如果有修改，則執行 sass 任務
  gulp.watch('src/sass/a.scss', ['sass']);
});

let gulp = require('gulp');
let clean = require('gulp-clean');

gulp.task('clean', function() {
  return gulp.src(['dist/js/*', 'dist/sass/*', 'dist/images/*'], {read: false})
    .pipe(clean());
});

安裝外掛 

npm install  gulp-babel babel-preset-es2015 --save-dev

let gulp = require('gulp');
let babel = require('gulp-babel');

gulp.task('scripts', function() {
  gulp.src('src/js/a.js')
    .pipe(babel({  // es6 -> es5
      presets: ['es2015']
    }))
    .pipe(gulp.dest('dist/js/'))
});