gulp构建项目——生产环境/开发环境、生成雪碧图

新建项目Gulp-Project，执行 npm init初始化项目生成package.json文件，然后再创建config文件夹，新建index.js（公共部分）、gulpfile.dev.js（开发环境）、gulpfile.prod.js（生产环境）。当然了，要打包编译的文件内容一般都放在都在根目录src里面。

项目结构：

Gulp-Project
├── README.md
├── config
│   ├── gulpfile.dev.js
│   ├── gulpfile.prod.js
│   └── index.js
├── gulpfile.js
├── package-lock.json
├── package.json
└── src
    ├── assets
    │   └── common.css
    ├── images
    │   ├── sprite_2
    │   │   ├── 01.jpg
    │   │   ├── 02.jpg
    │   │   └── 03.jpg
    │   └── t3.png
    ├── index.html
    ├── script
    │   └── index.js
    └── style
        ├── style.css
        └── style2.css

接下来开始写config文件夹里面的公共部分的js——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/*.css',  //如果是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;  //把这个接口暴露给别的文件用

配置开发环境文件gulpfile.dev.js：

//配置开发的文件

const gulp = require('gulp'); //引用gulp插件
const $ = require('gulp-load-plugins')();  //自动加载插件，可以省略一个一个引用插件
const config = require('./index.js'); //引用配置的路径文件
const open = require('open'); //开启服务
const revCollector = require('gulp-rev-collector'); //来自清单的静态资产修订数据收集器（由不同的流生成），并替换其在html模板中的链接。

function dev() {
    gulp.task('html:dev', function () {
        var optins = {
            removeComments: true,//清除HTML注释
            collapseWhitespace: true, //压缩HTML
            minfyJS: true,//压缩JS
            minfyCss: true,//压缩CSS
        }
        return gulp.src(['./rev/**/*.json',config.html.src])
        // .pipe($.htmlmin(optins))
        .pipe(revCollector({
            replaceReved: true,//允许替换, 已经被替换过的文件
            dirReplacements: {
                'style': 'css',
                'script': 'js',
                // 'cdn/': function(manifest_value) {
                //     return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;
                // }
            }})) //替换html中的引用
        .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($.rev()) //添加hash后缀 -- 文件名加MD5后缀
        .pipe($.cssmin())
        .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($.rev.manifest()) //生成文件映射
        .pipe(gulp.dest("rev/css")) //将映射文件导出到rev/css中
        .pipe($.connect.reload())
    });
    gulp.task('script:dev', function () {
        return gulp.src(config.script.src)
        .pipe($.babel())
        .pipe($.uglify())
        .pipe(gulp.dest(config.script.dev))
        .pipe($.rev()) //添加hash后缀 -- 文件名加MD5后缀
        .pipe($.rev.manifest()) //生成文件映射
        .pipe(gulp.dest("rev/js")) //将映射文件导出到rev/js中
        .pipe($.connect.reload())
    });
    gulp.task('img:dev', function () {
        return gulp.src(config.img.src)
        .pipe($.imagemin({ progressive: true }))
        .pipe(gulp.dest(config.img.dev))
        .pipe($.connect.reload())
    });
    gulp.task('connect', function (cb) {
        $.connect.server({
            root: config.dev,
            port: 8081,
            livereload: true
        });
        open('http://localhost:8081');
        cb();//执行回调，表示这个异步任务已经完成，起通作用,这样会执行下个任务
    })
    gulp.task('watchs',function(){
        gulp.watch(config.html.src, gulp.series('html:dev'));
        gulp.watch(config.html.src, gulp.series('style:dev'));
        gulp.watch(config.html.src, gulp.series('script:dev'));
        gulp.watch(config.html.src, gulp.series('img:dev'));
    })
    gulp.task('dev', gulp.series(gulp.parallel('style:dev', 'script:dev','img:dev'),'html:dev','connect','watchs'), function () {
        // console.log('ok')
        // $.connect.server({
        //     root: config.dev,
        //     port: 8080,
        //     livereload: true
        // });
        // open('http://localhost:8080');
        // 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($.cssmin()).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', gulp.parallel('html', 'style', 'script', 'assets', 'img'))
}
module.exports = prod;

最后是gulpfile.js：把 config里的文件引入，这里还写有歇息公共的任务，雪碧图还有文件的清理都是放在这里。

const gulp = require('gulp');
const del = require('del');
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 build

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

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

最后再贴一下我的package.json，因为我为了方便，把启动命令也配在这个文件了：

  "scripts": {
    "dev": "gulp dev",
    "build": "gulp build",
    "del": "gulp clean:dev",
    "sprite": "gulp sprite"
  },