写一份gulp常用配置文件，构建前端工作流

目录

• ​​目录​​
• ​​前言​​
• ​创建项目​

• ​​初始化项目​​
• ​​创建目录结构​​

• ​编写Gulp配置​

• ​​创建gulp的config文件​​
• ​​创建gulp的dev文件​​
• ​​创建gulp的prod文件​​
• ​​调用dev和prod方法​​

• ​​运行gulp​​
• ​​定义脚本scripts​​
• ​​附录​​
• ​自动创建基础目录结构​

• ​​初始目录和文件​​
• ​​安装mkdirp插件​​
• ​​补充配置创建初始化任务​​
• ​​调用init任务​​
• ​​执行初始化​​

前言

　　上回写了一篇关于《​​一份gulp的配置文件​​》的文章。其中已经提及了简单项目中gulp的配置。
　　在使用实践的过程中，发现这样的一份配置并不太“友好”，没有区分开发环境和生产环境。在实际中，开发过程中并不需要把所有东西都做到面面俱到，如：必须压缩CSS、JS文件等操作。我们可以在真正发布到生产环境的时候再进行这样的操作。在这里，读者可以先参考《​​​入门：十分钟自动化构建——jack_lo​​》一文。

创建项目

初始化项目

　　进入到项目目录，使用如下命令初始化项目：

npm init

　　当然，也可以直接创建一个package.json文件，内容如下：

{
  "name": "Gulp-Workflow",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "gulp dev",
    "dev": "gulp dev",
    "clean": "rimraf dist",
    "build": "rimraf dist && gulp build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.6",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-jshint": "^2.0.4",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.0.0",
    "gulp-uglify": "^2.0.0",
    "jshint": "^2.9.4"
  }
}

　　其中​​scripts​​​中定义的是当前项目下的一些npm脚本操作，后续将要提及。而​​devDependencies​​​则显然是该项目所需的依赖。
　　通过如下命令下载依赖：

npm install

创建目录结构

　　我们在项目中创建一个​​src​​​目录，作为项目的源。而创建​​dist​​​目录作为源文件打包后存放的位置，创建​​build​​目录放置gulp的另外一些配置文件。如下：

- project
  |- build
  |- dist // 打包文件夹
  |- src  // 源文件夹
  | |- assets // 放置一些第三方文件，如bootstrap
  | |- css
  | | `- index.css
  | |- images
  | |- js
  | | `- index.js
  | |- sass
  | | `- index.scss
  |- gulpfile.js
  `- package.json

编写Gulp配置

创建gulp的config文件

　　我们在build文件夹中可以创建一个 gulpfile.config.js 文件，主要用途为保存项目的目录配置，如源文件存放的路径，打包后文件存放的路径等，可以进行灵活配置。同时将Config对应暴露出来供其他文件引用。
gulpfile.config.js

var SRC_DIR = './src/';     // 源文件目录  
var DIST_DIR = './dist/';   // 文件处理后存放的目录  
var DIST_FILES = DIST_DIR + '**'; // 目标路径下的所有文件  

var Config = {
    src: SRC_DIR,
    dist: DIST_DIR,
    dist_files: DIST_FILES,
    html: {  
        src: SRC_DIR + '*.html',  
        dist: DIST_DIR  
    },  
    assets: {  
        src: SRC_DIR + 'assets/**/*',            // assets目录：./src/assets  
        dist: DIST_DIR + 'assets'                // assets文件build后存放的目录：./dist/assets  
    },  
    css: {  
        src: SRC_DIR + 'css/**/*.css',           // CSS目录：./src/css/  
        dist: DIST_DIR + 'css'                   // CSS文件build后存放的目录：./dist/css  
    },  
    sass: {  
        src: SRC_DIR + 'sass/**/*.scss',         // SASS目录：./src/sass/  
        dist: DIST_DIR + 'css'                   // SASS文件生成CSS后存放的目录：./dist/css  
    },  
    js: {  
        src: SRC_DIR + 'js/**/*.js',             // JS目录：./src/js/  
        dist: DIST_DIR + 'js',                   // JS文件build后存放的目录：./dist/js  
        build_name: 'build.js'                   // 合并后的js的文件名  
    },  
    img: {  
        src: SRC_DIR + 'images/**/*',            // images目录：./src/images/  
        dist: DIST_DIR + 'images'                // images文件build后存放的目录：./dist/images  
    }  
};

module.exports = Config;

创建gulp的dev文件

　　在build文件夹下创建gulpfile.dev.js文件，该文件放置的时开发环境下调用的任务，同时使用browser-sync实现编写程序的时候浏览器自动刷新的功能。
gulpfile.dev.js

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer'); // 处理css中浏览器兼容的前缀  
var rename = require('gulp-rename'); //重命名  
var cssnano = require('gulp-cssnano'); // css的层级压缩合并
var sass = require('gulp-sass'); //sass
var jshint = require('gulp-jshint'); //js检查 ==> npm install --save-dev jshint gulp-jshint（.jshintrc：https://my.oschina.net/wjj328938669/blog/637433?p=1）  
var uglify = require('gulp-uglify'); //js压缩  
var concat = require('gulp-concat'); //合并文件  
var imagemin = require('gulp-imagemin'); //图片压缩 
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var Config = require('./gulpfile.config.js');
//======= gulp dev 开发环境下 ===============
function dev() {
    /** 
     * HTML处理 
     */
    gulp.task('html:dev', function () {
        return gulp.src(Config.html.src).pipe(gulp.dest(Config.html.dist)).pipe(reload({
            stream: true
        }));
    });
    /** 
     * assets文件夹下的所有文件处理 
     */
    gulp.task('assets:dev', function () {
        return gulp.src(Config.assets.src).pipe(gulp.dest(Config.assets.dist)).pipe(reload({
            stream: true
        }));
    });
    /** 
     * CSS样式处理 
     */
    gulp.task('css:dev', function () {
        return gulp.src(Config.css.src).pipe(gulp.dest(Config.css.dist)).pipe(reload({
            stream: true
        }));
    });
    /** 
     * SASS样式处理 
     */
    gulp.task('sass:dev', function () {
        return gulp.src(Config.sass.src).pipe(sass()).pipe(gulp.dest(Config.sass.dist)).pipe(reload({
            stream: true
        }));
    });
    /** 
     * js处理 
     */
    gulp.task('js:dev', function () {
        return gulp.src(Config.js.src).pipe(jshint('.jshintrc')).pipe(jshint.reporter('default')).pipe(gulp.dest(Config.js.dist)).pipe(reload({
            stream: true
        }));
    });
    /** 
     * 图片处理 
     */
    gulp.task('images:dev', function () {
        return gulp.src(Config.img.src).pipe(imagemin({
            optimizationLevel: 3
            , progressive: true
            , interlaced: true
        })).pipe(gulp.dest(Config.img.dist)).pipe(reload({
            stream: true
        }));
    });
    gulp.task('dev', ['html:dev', 'css:dev', 'sass:dev', 'js:dev', 'assets:dev', 'images:dev'], function () {
        browserSync.init({
            server: {
                baseDir: Config.dist
            }
            , notify: false
        });
        // Watch .html files  
        gulp.watch(Config.html.src, ['html:dev']);
        // Watch .css files  
        gulp.watch(Config.css.src, ['css:dev']);
        // Watch .scss files  
        gulp.watch(Config.sass.src, ['sass:dev']);
        // Watch assets files  
        gulp.watch(Config.assets.src, ['assets:dev']);
        // Watch .js files  
        gulp.watch(Config.js.src, ['js:dev']);
        // Watch image files  
        gulp.watch(Config.img.src, ['images:dev']);
    });
}
//======= gulp dev 开发环境下 ===============
module.exports = dev;

　　在该文件中创建了如​​html:dev​​​、​​css:dev​​​、​​sass:dev​​​等几个任务（具体任务实现了什么功能，聪明的你应该看得出来~），这几个任务被放置在​​dev​​​函数中，并且将​​dev​​​函数暴露出去。至于为啥这么做嘛，后面会知道的。
　　其中一个主要的gulp任务 ​​​dev​​​（同时也是生产环境下没有的gulp任务），开启了一个browserSync服务器，同时监听各个资源文件的变化，当文件发生变化后通知浏览器进行重新刷新。
　　使用​​​gulp dev​​命令就可以进入开发模式咯~~（当然现在还不行，你骗我呢。因为dev方法还未被调用。）

创建gulp的prod文件

　　在build文件夹下创建gulpfile.prod.js文件，用于放置生产环境下运行的任务。其中在生产环境下，我们并不需要使用到什么浏览器自动刷新的功能，只要进行如压缩CSS、JS文件等操作即可。
gulpfile.prod.js

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer'); // 处理css中浏览器兼容的前缀  
var rename = require('gulp-rename'); //重命名  
var cssnano = require('gulp-cssnano'); // css的层级压缩合并
var sass = require('gulp-sass'); //sass
var jshint = require('gulp-jshint'); //js检查 ==> npm install --save-dev jshint gulp-jshint（.jshintrc：https://my.oschina.net/wjj328938669/blog/637433?p=1）  
var uglify = require('gulp-uglify'); //js压缩  
var concat = require('gulp-concat'); //合并文件  
var imagemin = require('gulp-imagemin'); //图片压缩 
var Config = require('./gulpfile.config.js');
//======= gulp build 打包资源 ===============
function prod() {
    /** 
     * HTML处理 
     */
    gulp.task('html', function () {
        return gulp.src(Config.html.src).pipe(gulp.dest(Config.html.dist));
    });
    /** 
     * assets文件夹下的所有文件处理 
     */
    gulp.task('assets', function () {
        return gulp.src(Config.assets.src).pipe(gulp.dest(Config.assets.dist));
    });
    /** 
     * CSS样式处理 
     */
    gulp.task('css', function () {
        return gulp.src(Config.css.src).pipe(autoprefixer('last 2 version')).pipe(gulp.dest(Config.css.dist)).pipe(rename({
                suffix: '.min'
            })).pipe(cssnano()) //执行压缩  
            .pipe(gulp.dest(Config.css.dist));
    });
    /** 
     * SASS样式处理 
     */
    gulp.task('sass', function () {
        return gulp.src(Config.sass.src).pipe(autoprefixer('last 2 version')).pipe(sass()).pipe(gulp.dest(Config.sass.dist)).pipe(rename({
                suffix: '.min'
            })) //rename压缩后的文件名  
            .pipe(cssnano()) //执行压缩  
            .pipe(gulp.dest(Config.sass.dist));
    });
    /** 
     * js处理 
     */
    gulp.task('js', function () {
        return gulp.src(Config.js.src).pipe(jshint('.jshintrc')).pipe(jshint.reporter('default')).pipe(gulp.dest(Config.js.dist)).pipe(rename({
            suffix: '.min'
        })).pipe(uglify()).pipe(gulp.dest(Config.js.dist));
    });
    /** 
     * 合并所有js文件并做压缩处理 
     */
    gulp.task('js-concat', function () {
        return gulp.src(Config.js.src).pipe(jshint('.jshintrc')).pipe(jshint.reporter('default')).pipe(concat(Config.js.build_name)).pipe(gulp.dest(Config.js.dist)).pipe(rename({
            suffix: '.min'
        })).pipe(uglify()).pipe(gulp.dest(Config.js.dist));
    });
    /** 
     * 图片处理 
     */
    gulp.task('images', function () {
        return gulp.src(Config.img.src).pipe(imagemin({
            optimizationLevel: 3
            , progressive: true
            , interlaced: true
        })).pipe(gulp.dest(Config.img.dist));
    });
    gulp.task('build', ['html', 'css', 'sass', 'js', 'assets', 'images']);
}
module.exports = prod;

　　同样在gulpfile.prod.js文件中将所有的任务放置在了prod函数中，同时暴露该函数供外部调用。
　　使用​​​gulp build​​命令就可以实现资源的打包咯~~（当然现在还不行，你又骗我呢。因为prod方法还未被调用。）

调用dev和prod方法

　　在真正的gulp配置文件gulpfile.js中，引入gulpfile.dev.js和gulpfile.prod.js文件，并调用dev和prod方法，这样对应环境下的各个任务即被创建出来了。
gulpfile.js

/**
 * Created by DreamBoy on 2017/1/8.
 */

var prod = require('./build/gulpfile.prod.js');
var dev = require('./build/gulpfile.dev.js');
prod();
dev();

运行gulp

　　这个时候，我们可以使用​​gulp dev​​​命令进行开发模式，此时会监听项目src中文件的变化，执行对应的任务，与此同时会通知浏览器进行刷新，及时响应。
　　而使用​​​gulp build​​命令则可以针对生产环境的要求打包资源文件，用于生产。

定义脚本scripts

　　注意到，我们在​​gulp build​​​命令之前并没有执行什么删除原来dist目录的文件的操作，这样实在不太好呀。（如果没有先进行删除操作的话，可能在开发环境下生成了许多不需要的文件，此时进行打包仍会保留到这些文件。）并且有些时候，我们需要有一个clean的能力——清除所有打包后的文件。
　　这还不简单，直接到dist目录下，手动把所有文件都删除就行啦。呃，这种方式给旁边的妹纸看到会觉得很low嘞。
　　那我们换种炫酷一点的方式。注意到之前package.json文件中的​​​scripts​​吗？在这里就是定义脚本的地方。如：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "gulp dev",
    "dev": "gulp dev",
    "clean": "rimraf dist",
    "build": "rimraf dist && gulp build"
}

　　其中，主要的有：
1. 定义了start脚本，用于执行​​​gulp dev​​​命令；
2. 定义了dev脚本，同样用于执行​​​gulp dev​​​命令；
3. 定义了clean脚本，用于执行​​​rimraf dist​​​命令（删除dist目录下的所有文件）；
4. 定义了build脚本，用于执行​​​rimraf dist​​​命令，还有​​gulp build​​​命令，实际上就是先删除dist目录下的所有文件，然后再打包生成各资源文件。
　　需要​​​rimraf​​，我们必须先进行全局安装：

npm install rimraf -g

　　这样我们在实际装逼使用过程中：
1. 使用​​​npm start​​​命令将对应执行​​gulp dev​​​命令；
2. 使用​​​npm run dev​​​命令将对应执行​​gulp dev​​​命令；
3. 使用​​​npm run clean​​​命令将删除所有生成后的文件；
4. 使用​​​npm run build​​命令可以先删除生成后的文件，再重新打包生成。

附录

　　另外在gulp中创建了一个js和js:dev任务，其中使用jshint对js进行了校验，需要在项目根目录下创建 ​​.jshintrc​​文件，文件内容如下：

{

  "es5": true,    
  "node": true,

  "bitwise": false,

  "camelcase": false,

  "curly": false,

  "eqeqeq": false,

  "forin": true,

  "strict": false,

  "freeze": true,

  "immed": true,

  "indent": 4,

  "latedef": true,

  "newcap": true,

  "noarg": true,

  "noempty": false,

  "nonbsp": true,

  "nonew": true,

  "plusplus": false,

  "undef": true,

  "trailing": true,

  "debug": false,

  "funcscope": true,

  "laxcomma": false,

  "loopfunc": true,

  "onevar": false,

  "unused": true

}

自动创建基础目录结构

（2017-10-10 应博友问题，补充初始化项目目录结构的实现）

初始目录和文件

- project
  |- build
  | |- gulpfile.config.js
  | |- gulpfile.dev.js
  | |- gulpfile.init.js
  | |- gulpfile.prod.js
  |- gulpfile.js
  `- package.json

安装​​mkdirp​​插件

　　使用​​mkdirp​​插件来创建目录，先该插件：

cnpm install mkdirp --save-dev

　　安装成功后，package.json 如下：

{
  "name": "Gulp-Workflow",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "gulp dev",
    "dev": "gulp dev",
    "clean": "rimraf dist",
    "build": "rimraf dist && gulp build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.6",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-jshint": "^2.0.4",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.0.0",
    "gulp-uglify": "^2.0.0",
    "jshint": "^2.9.4",
    "mkdirp": "^0.5.1"
  }
}

补充配置，创建初始化任务

　　修改gulp.config.js文件中的配置，添加​​dir​​属性 ，用来声明不同文件所在目录的路径。如下：

var SRC_DIR = './src/';     // 源文件目录  
var DIST_DIR = './dist/';   // 文件处理后存放的目录  
var DIST_FILES = DIST_DIR + '**'; // 目标路径下的所有文件  

var Config = {
    src: SRC_DIR,
    dist: DIST_DIR,
    dist_files: DIST_FILES,
    html: {  
        dir: SRC_DIR,
        src: SRC_DIR + '*.html',  
        dist: DIST_DIR  
    },  
    assets: {  
        dir: SRC_DIR + 'assets',
        src: SRC_DIR + 'assets/**/*',            // assets目录：./src/assets  
        dist: DIST_DIR + 'assets'                // assets文件build后存放的目录：./dist/assets  
    },  
    css: {  
        dir: SRC_DIR + 'css',
        src: SRC_DIR + 'css/**/*.css',           // CSS目录：./src/css/  
        dist: DIST_DIR + 'css'                   // CSS文件build后存放的目录：./dist/css  
    },  
    sass: {  
        dir: SRC_DIR + 'sass',
        src: SRC_DIR + 'sass/**/*.scss',         // SASS目录：./src/sass/  
        dist: DIST_DIR + 'css'                   // SASS文件生成CSS后存放的目录：./dist/css  
    },  
    js: {  
        dir: SRC_DIR + 'js',
        src: SRC_DIR + 'js/**/*.js',             // JS目录：./src/js/  
        dist: DIST_DIR + 'js',                   // JS文件build后存放的目录：./dist/js  
        build_name: 'build.js'                   // 合并后的js的文件名  
    },  
    img: {  
        dir: SRC_DIR + 'images',
        src: SRC_DIR + 'images/**/*',            // images目录：./src/images/  
        dist: DIST_DIR + 'images'                // images文件build后存放的目录：./dist/images  
    }  
};

module.exports = Config;

　　在前面的初始化目录和文件中，我们可以发现，多了一个文件​​gulpfile.init.js​​​，用来定义​​init​​​任务。
　　gulpfile.init.js，如下：

var gulp = require('gulp');
var mkdirp = require('mkdirp');
var Config = require('./gulpfile.config.js');
//======= gulp init 初始化项目结构 ===============
function init() {
    /** 
     * 初始化项目结构
     */
    gulp.task('init', function () {
        var dirs = [Config.html.dir, Config.assets.dir, Config.css.dir, Config.sass.dir, Config.js.dir, Config.img.dir];
        dirs.forEach(dir => {
            mkdirp.sync(dir);
        });
    });
}
module.exports = init;

调用init任务

　　修改​​gulpfile.js​​​文件，调用​​init​​任务，如下：

/**
 * Created by DreamBoy on 2017/1/8.
 */
var init = require('./build/gulpfile.init.js');
var prod = require('./build/gulpfile.prod.js');
var dev = require('./build/gulpfile.dev.js');
init();
prod();
dev();

执行初始化

　　执行如下命令后，我们可以发现项目下自动创建了对应src目录结构。

gulp init