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

目录

前言

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

创建项目

初始化项目

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

npm init
 
 
1
 
 
1

　　当然，也可以直接创建一个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"
  }
}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

npm install
 
 
1
 
 
1

创建目录结构

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

- project
  |- build
  |- dist // 打包文件夹
  |- src  // 源文件夹
  | |- assets // 放置一些第三方文件，如bootstrap
  | |- css
  | | `- index.css
  | |- images
  | |- js
  | | `- index.js
  | |- sass
  | | `- index.scss
  |- gulpfile.js
  `- package.json
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

编写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;
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

创建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;
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

　　在该文件中创建了如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;
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

　　同样在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();
 
 
1
2
3
4
5
6
7
8
 
 
1
2
3
4
5
6
7
8

运行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
2
3
4
5
6
7
 
 
1
2
3
4
5
6
7

　　其中，主要的有： 
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
 
 
1

　　这样我们在实际装逼使用过程中： 
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

}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 

  
  
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

---

（完）