Gulpfile.js 详解

参考博文：《前端自动化gulp遇上es6从 无知到深爱》
地址：http://www.cnblogs.com/QRL909109/p/5620824.html

// generated on 2017-04-19 using generator-webapp 2.4.1const gulp = require('gulp');const gulpLoadPlugins = require('gulp-load-plugins');   //自动加载配置文件中的已安装插件const browserSync = require('browser-sync').create();   //浏览器同步，快速响应文件更改并自动刷新页面const del = require('del');  //清除文件const wiredep = require('wiredep').stream;  //将bower安装的库及依赖引进html中const runSequence = require('run-sequence');  //任务独立，解除任务间的依赖，增强task复用const $ = gulpLoadPlugins();const reload = browserSync.reload;var dev = true;gulp.task('styles', () => {  return gulp.src('app/styles/*.scss')    .pipe($.plumber())                  // plumber : 错误处理，继续向下运行    .pipe($.if(dev, $.sourcemaps.init()))    .pipe($.sass.sync({      outputStyle: 'expanded',         //outputStyle : 嵌套输出-- nested ,展开输出 ----expanded,紧凑输出 ——--compact,压缩输出 --- compressed      precision: 10,                   //precision : 精度，小数后10位      includePaths: ['.']              // 指明加载的@import scss的包含路径    }).on('error', $.sass.logError))    .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))  //市场份额，每个浏览器最后2个版本，火狐版本    .pipe($.if(dev, $.sourcemaps.write()))    .pipe(gulp.dest('.tmp/styles'))    .pipe(reload({stream: true}));     // 任务完成后刷新页面});gulp.task('scripts', () => {  return gulp.src('app/scripts/**/*.js')    .pipe($.plumber())    .pipe($.if(dev, $.sourcemaps.init()))       //初始化    .pipe($.babel())                            // ES6转为ES5    .pipe($.if(dev, $.sourcemaps.write('.')))   //生成sourcemap文件，路径为.    .pipe(gulp.dest('.tmp/scripts'))    .pipe(reload({stream: true}));              });function lint(files) {  return gulp.src(files)    .pipe($.eslint({ fix: true }))    .pipe(reload({stream: true, once: true}))    .pipe($.eslint.format())    .pipe($.if(!browserSync.active, $.eslint.failAfterError()));}gulp.task('lint', () => {  return lint('app/scripts/**/*.js')    .pipe(gulp.dest('app/scripts'));});gulp.task('lint:test', () => {  return lint('test/spec/**/*.js')    .pipe(gulp.dest('test/spec'));});gulp.task('html', ['styles', 'scripts'], () => {  return gulp.src('app/*.html')    .pipe($.useref({searchPath: ['.tmp', 'app', '.']}))  //useref ：把html中零碎的引入合并，不负责代码压缩    .pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}})))    .pipe($.if(/\.css$/, $.cssnano({safe: true, autoprefixer: false})))    .pipe($.if(/\.html$/, $.htmlmin({      collapseWhitespace: true,      minifyCSS: true,      minifyJS: {compress: {drop_console: true}},      processConditionalComments: true,      removeComments: true,      removeEmptyAttributes: true,      removeScriptTypeAttributes: true,      removeStyleLinkTypeAttributes: true    })))    .pipe(gulp.dest('dist'));});gulp.task('images', () => {  return gulp.src('app/images/**/*')    .pipe($.cache($.imagemin()))         //使用gulp-cache只压缩修改的图片，没有修改的图片直接从缓存文件读取    .pipe(gulp.dest('dist/images'));});gulp.task('fonts', () => {  return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {})    .concat('app/fonts/**/*'))    .pipe($.if(dev, gulp.dest('.tmp/fonts'), gulp.dest('dist/fonts')));});gulp.task('extras', () => {  return gulp.src([    'app/*',    '!app/*.html'  ], {    dot: true  }).pipe(gulp.dest('dist'));});gulp.task('clean', del.bind(null, ['.tmp', 'dist']));gulp.task('serve', () => {  runSequence(['clean', 'wiredep'], ['styles', 'scripts', 'fonts'], () => {    browserSync.init({      notify: false,      port: 9000,      server: {        baseDir: ['.tmp', 'app'],        routes: {          '/bower_components': 'bower_components'        }      }    });    gulp.watch([      'app/*.html',      'app/images/**/*',      '.tmp/fonts/**/*'    ]).on('change', reload);    gulp.watch('app/styles/**/*.scss', ['styles']);    gulp.watch('app/scripts/**/*.js', ['scripts']);    gulp.watch('app/fonts/**/*', ['fonts']);    gulp.watch('bower.json', ['wiredep', 'fonts']);  });});gulp.task('serve:dist', ['default'], () => {  browserSync.init({    notify: false,    port: 9000,    server: {      baseDir: ['dist']    }  });});gulp.task('serve:test', ['scripts'], () => {  browserSync.init({    notify: false,    port: 9000,    ui: false,    server: {      baseDir: 'test',      routes: {        '/scripts': '.tmp/scripts',        '/bower_components': 'bower_components'      }    }  });  gulp.watch('app/scripts/**/*.js', ['scripts']);  gulp.watch(['test/spec/**/*.js', 'test/index.html']).on('change', reload);  gulp.watch('test/spec/**/*.js', ['lint:test']);});// inject bower componentsgulp.task('wiredep', () => {  gulp.src('app/styles/*.scss')    .pipe($.filter(file => file.stat && file.stat.size))    .pipe(wiredep({      ignorePath: /^(\.\.\/)+/    }))    .pipe(gulp.dest('app/styles'));  gulp.src('app/*.html')    .pipe(wiredep({      exclude: ['bootstrap-sass'],      ignorePath: /^(\.\.\/)*\.\./    }))    .pipe(gulp.dest('app'));});gulp.task('build', ['lint', 'html', 'images', 'fonts', 'extras'], () => {  return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));});gulp.task('default', () => {  return new Promise(resolve => {    dev = false;    runSequence(['clean', 'wiredep'], 'build', resolve);  });});/**  gulp-imagemin 参数 */ // imagemin = require('gulp-imagemin');//   .pipe(imagemin({//     optimizationLevel: 5,  //默认：3，取值范围：0-7 （优化等级）//     progressive:true,      //默认：false  无损压缩jpg图片//     interlaced: true ,     //默认：false  隔行扫描gif进行渲染//     multipass:true,        //默认：false  多次优化svg直到完全优化//   }))// 2.深度压缩图片// imagemin = require('gulp-imagemin');// pngquant = require('gulp-pngquant');// // .pipe(imagemin({//      progressive: true,//      svgPlugins: [{removeViewBox:false}],  //不移除svg的viewbox属性//      use:[pngquant()]     //使用pngquant深度压缩png图片的imagemin插件// }))