gulp构建项目（五）：gulp-if条件判断及环境变量设置

需求分析：我们需要对不同的环境（开发环境、生产环境）对文件进行不同的处理。至于原因，前面文章中阐述过了，这里就不多做说明。

一、gulp设置环境变量，并生成env.js文件

1、设置环境变量，是用于执行gulp任务时的判断
2、生成env.js文件，是用于开发页面时，判断环境

var fs = require('fs');

var env = 'dev'; // 用于执行gulp任务时的判断
function set_env(type){ 
    env = type || 'dev';
    // 生成env.js文件，用于开发页面时，判断环境
    fs.writeFile("./env.js", 'export default ' + env + ';', function(err){
        err && console.log(err);
    });
}

二、gulp默认任务拆成dev和build

生产环境不用启服务，不用监听文件

// 开发环境
gulp.task('dev', function(cb) {
    set_env('dev'); // 改变env的值
    runSequence(
        ['clean'],
        ['html', 'js_libs', 'js_main', 'css_libs', 'css_main', 'images'],
        ['browser', 'watch'],
        cb);
});

// 生产环境
gulp.task('build', function(cb) {
    set_env('build'); // 改变env的值
    runSequence(
        ['clean'],
        ['html', 'js_libs', 'js_main', 'css_libs', 'css_main', 'images'], 
        cb);
});

三、安装gulp-if

压缩文件也需要判断当前环境，所以需要引入gulp-if模块

npm i -D gulp-if

四、gulp-if参数说明

/**
*   @param condition {Boolen}   判断条件或glob条件
*   @param stream               condition为true时，执行的任务
*   @param elseStream           condition为false时，执行的任务
*   @param minimatchOptions     如果是GLUB条件，这些选项被传递给minimatch
*/
gulpif(condition, stream [, elseStream, [, minimatchOptions]])

五、gulp-if以及环境变量的使用

var gulpif = require('gulp-if');            // 条件判断

// 打包js
gulp.task('js_main', function(){
    return gulp.src('./src/js/*.js')
        .pipe(concat('main.min.js'))
        .pipe(gulpif(env==='build', uglify()))  // 判断是否压缩压缩js
        .pipe(gulp.dest('./dist/js'));
});

// 打包css
gulp.task('css_main', function(){
    return gulp.src('./src/css/**/*.css')
        .pipe(concat('main.min.css'))
        .pipe(gulpif(env==='build', csso()))    // 判断是否压缩压缩css
        .pipe(gulp.dest('./dist/css'));
});

// 打包images
gulp.task('images', function () {
    return gulp.src('./src/images/*.*')
        .pipe(gulpif(env==='build', imagemin({  // 判断是否压缩压缩images
            progressive: true,
        })))
        .pipe(gulp.dest('./dist/images'));
});

六、分别执行gulp dev和gulp build查看压缩效果

七、修改package.json文件

执行npm run dev 等同于 gulp dev
执行npm run build 等同于 gulp build

"scripts": {
    "dev": "gulp dev",
    "build": "gulp build"
},

.

项目地址（别忘了给星哦）

https://github.com/shiguang0116/gulp-project

相关文章

gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题