前言

用gulp构建官网的项目，起初用别人配置好的gulpfile来构建，后来发现有很多不人性化的操作，比如说在开发调试中，打印出console，按这个去找源文件的出处，发现代码被压缩了，找的可费劲了，说白就是没分配好开发环境和生产环境的。然后是在生产环境中没清除掉console，作为一枚处女座，忍受不了，于是打算大改造gulpfile.js。如有不足之处，请指出来哈，我将会献上我的膝盖~

分配开发环境和生产环境

• 在本项目的根目录下新建一个文件夹，命名为"config"，放入相关gulp的配置文件
• 在config的文件夹里，新建一个文件，为"index.js"，放入相关路径的配置

const SRC_DIR='./src/';   //源路径，不支持相对路径，下面也是
const DEV_DIR='./dev/';   //生成开发环境的文件
const DIST_DIR='./dist/';  //生成生产环境的文件


const config={
    src:SRC_DIR,
    dist:DIST_DIR,
    dev:DEV_DIR,
    html:{
        src:SRC_DIR+'*.html',
        dev:DEV_DIR,
        dist:DIST_DIR
    },
    assets:{
        src:SRC_DIR+'assets/**/*',
        dev:DEV_DIR+'assets',
        dist:DIST_DIR+'assets'
    },
    style:{
        src:SRC_DIR+'style/*.less',  //如果是scss或者css，就改对应的
        dev:DEV_DIR+'css',
        dist:DIST_DIR+'css'
    },
    script:{
        src:SRC_DIR+'script/*.js',
        dev:DEV_DIR+'js',
        dist:DIST_DIR+'js'
    },
    img:{
        src:SRC_DIR+'images/**/*',
        dev:DEV_DIR+'images',
        dist:DIST_DIR+'images'
    }
};

module.exports=config;  //把这个接口暴露给别的文件用

• 在config中新建两个文件，分别为"gulpfile.dev.js"，"gulpfile.prod.js"

• gulpfile.dev.js

const gulp=require('gulp'); //引用gulp插件
const $=require('gulp-load-plugins')();  //自动加载插件，可以省略一个一个引用插件
const config=require('./index.js'); //引用配置的路径文件
const open=require('open'); //开启服务

function dev(){
    gulp.task('html:dev',function(){
        return gulp.src(config.html.src).pipe($.fileInclude()).pipe(gulp.dest(config.html.dev)).pipe($.connect.reload())
    });
    gulp.task('assets:dev',function(){
        return gulp.src(config.assets.src).pipe(gulp.dest(config.assets.dev)).pipe($.connect.reload())
    });
    gulp.task('style:dev',function(){
        return gulp.src(config.style.src).pipe($.less()).pipe($.autoprefixer({
                browseers: ['last 2 versions','Firefox>=20','last 2 Explorer versions','last 3 Safari versions'],
                cascade: true
        })).pipe(gulp.dest(config.style.dev)).pipe($.connect.reload())
    });
    gulp.task('script:dev',function(){
        return gulp.src(config.script.src).pipe($.babel()).pipe($.babel()).pipe(gulp.dest(config.script.dev)).pipe($.connect.reload())
    });
    gulp.task('img:dev',function(){
        return gulp.src(config.img.src).pipe($.imagemin()).pipe(gulp.dest(config.img.dev)).pipe($.connect.reload())
    });
    gulp.task('dev',['html:dev','style:dev','script:dev','img:dev'],function(){
            $.connect.server({
                root:config.dev,
                port:3030,
                livereload:true
            });
            open('http://localhost:3030');
            gulp.watch(config.html.src,['html:dev']);
            gulp.watch(config.html.src,['style:dev']);
            gulp.watch(config.html.src,['script:dev']);
            gulp.watch(config.html.src,['img:dev']);
    })
}
module.exports=dev;

• gulpfile.prod.js

//配置生产的文件

const gulp=require('gulp'); //引用gulp插件
const $=require('gulp-load-plugins')();  //自动加载插件，可以省略一个一个引用插件
const config=require('./index.js'); //引用配置的路径文件

function prod(){
    gulp.task('html',function(){
        return gulp.src(config.html.src).pipe($.fileInclude()).pipe(gulp.dest(config.html.dist))
    });
    gulp.task('assets',function(){
        return gulp.src(config.assets.src).pipe(gulp.dest(config.assets.dist))
    });
    gulp.task('style',function(){
        return gulp.src(config.style.src).pipe($.less()).pipe($.autoprefixer({
                browseers: ['last 2 versions','Firefox>=20','last 2 Explorer versions','last 3 Safari versions'],
                cascade: true
        })).pipe($.cleanCss({compatibility: 'ie8'}))
        .pipe(gulp.dest(config.style.dist))
    });
    gulp.task('script',function(){
        return gulp.src(config.script.src)
        .pipe($.babel())
        .pipe($.uglify())
        .pipe($.stripDebug({
            debugger:true,console:true,alert:false
        }))
        .pipe(gulp.dest(config.script.dist))
    });
    gulp.task('img',function(){
        return gulp.src(config.img.src).pipe($.imagemin()).pipe(gulp.dest(config.img.dist))
    });
    gulp.task('build',['html','style','script','assets','img'])
}
module.exports=prod;

是不是一目了然呢？

最后新建gulpfile.js

• 在本项目的根目录下新建一个文件，为gulefile.js，命令行都是通过这个文件启动

const gulp=require('gulp');
const prod=require('./config/gulpfile.prod.js');
const dev=require('./config/gulpfile.dev.js');
const config=require('./config/index.js');
const $=require('gulp-load-plugins')(); 

dev();  //启动开发环境，gulp dev
prod(); //启动生产环境,  gulp prod

gulp.task('clean',function(){
    gulp.src([config.dev,config.dist])
    .pipe($.clean());
});
gulp.task('sprite', function () {  //生成雪碧图，gulp sprite,分别生成dev和dist
  let spriteData = gulp.src(config.src+'/images/sprite_2/*.png')
  .pipe($.spritesmith({
    imgName: 'images/sprite_2.png',
    cssName: 'css/sprite.css',
    padding: 2, // 图片之间的间距
    algorithm: 'left-right', //图片排列格式，默认是top-down，我这里稍微修改下
    algorithmOpts: {sort: false} //是否排序
  }));

  return spriteData.pipe(gulp.dest(config.dist)).pipe(gulp.dest(config.dev));
});

插件介绍

• gulp-autoprefixer

  • 这个是提供自动添加兼容浏览器的前缀，不需要我们手动添加，不过这并不全的。

• gulp-clean

  • 每次生成dist和dev，有时为了预防缓存的问题，需要清除的，但每次要手动清除，作为懒癌症的我都嫌弃了，只想用命令运行就清除掉，所以用这个插件的。

• gulp-clean-css

  • 清除css的注释，减少文件的大小，同时为了减少请求的延迟

• gulp-connect

  • 这个是创建本地服务器，还能热启动加载

• gulp-file-include

  • 这个是神器的哈，引用共同的html模板，代码如下

  //meta.html
  <title>@@title</title>
  //index.html
  @@include('./page/meta.html',{
      "title":"首页"
  })
  

• gulp-imagemin

  • 压缩图片的大小

• gulp-less

  • 把less转化为css

• gulp-load-plugins

  • 这个是神器的，当引用多个插件的，一个一个require，多繁杂啊，仅require这个插件的，然后在引用其他的插件时，只要写"$.<插件名>"
  • 插件名的例子如下

  1、gulp-connect
      $.connect
  2、gulp.spritesmith
      $.spritesmith
  3、gulp-file-include
      $.fileInclude
  

• gulp-strip-debug

  • 去除掉console，alert，debug，对生产环境特别有用。
  • 其实我一开始是拒绝这个插件的，因为这个官方文档没说明不除掉alert的方法，然后没有其他的不错类似这个的插件，只能硬着头皮查更多关于这个的资料，结果找到了，只不过有差别的。下面会给出参考网址
  • 要除掉alert的话，就在生产环境的文件中配置

  $.stripDebug({
      debugger:true,console:true,alert:false
  })
  

  我以为结束了，兴高采烈的运行生产环境，手抖的戳，等了“半天”，没看到alert弹出来，emmm，抱自己痛哭的去看参考网址，卧槽，还要改插件的配置，这个开发者是懒得再多配置了么？好吧～

  • 去node_modules里找gulp-file-include/index.js，然后加options，意思是接受上面的配置

  const through = require('through2');
  const stripDebug = require('strip-debug');
  const PluginError = require('plugin-error');
  module.exports = (options) => {
      return through.obj(function (file, enc, cb) {
          if (file.isNull()) {
              cb(null, file);
              return;
          }
          if (file.isStream()) {
              cb(new PluginError('gulp-strip-debug', 'Streaming not supported'));
              return;
          }
          try {
              file.contents = Buffer.from(stripDebug(file.contents.toString(),options).toString());
              this.push(file);
          } catch (err) {
              this.emit('error', new PluginError('gulp-strip-debug', err, {fileName: file.path}));
          }
          cb();
      });
  };
  

  • 然后再找node_modules里找strip-debug/index.js，修改最后的一段函数

  module.exports = ((source,options) =>{
      options=options || {};
      return rocambole.moonwalk(source, node => {
      options.debugger!==false && stripDebugger(node);
      options.console!==false && stripConsole(node);
      options.alert!==false && stripAlert(node);
      })
  })
  

  ok了，喜极而泣～

  • 参考网址：http://dyygtfx.github.io/2015/08/24/%E4%BF%AE%E6%94%B9%20gulp-strip-debug%20%E9%85%8D%E7%BD%AE%EF%BC%8C%E4%B8%8D%E8%A6%81%E5%88%A0%E9%99%A4%20alert%20%E8%B0%83%E8%AF%95%E6%96%B9%E6%B3%95/

• gulp-ugllify

  • 压缩js的代码

• gulp.spritesmith

  • 生成雪碧图

• open

  • 这个适合懒癌症的人，不需要每次启动服务时就手动打开浏览器的

然后至于怎么用，看上面的gulpfile配置喽！

然后献上：https://blog.csdn.net/qq_15096707/article/details/54293203
我是参考这个，思路不错的，可以“去粗取精”

溜了溜了～