内容基本整理于gulp-book chapter7，我有一点增改。

1. 初始安装

npm init

创建package.json保存所有npm install --save-dev gulp-xxx模块依赖和模块版本。

npm install gulp --save-dev

安装gulp到项目
package.json中增加下列代码，声明此项目的开发依赖 gulp。

"devDependencies": {
"gulp": "^3.9.1"
}

安装项目中用到的其他模块
例如

npm install gulp-uglify  --save-dev

package.json的”devDependencies”中继续增加依赖声明。

在gulpfile.js已配置情况下直接输入npm install命令即可检测package.json中的 “devDependencies”并安装所有依赖。

2. 设计目录结构

src源码存放目录
dist编译压缩后的文件存放目录

dist和dest区别^foot：
dist是指distribution——分配,分发——发布完成的文件夹一般命名dist
dest则是destination——目的地,终点——用于grunt文件路径相关的配置项，一般会和src配对出现。比如文件压缩插件：压缩源（src）文件，生成压缩包到（dest）。

3. 用gulp-util设置 CLI 输出文字的颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 获取 gulp 和 gulp-util 模块
var gulp = require('gulp')
var gutil = require('gulp-util')

//使用 gulp.task('default') 定义默认任务
//colors Is an instance of chalk.The default gulp coloring using gutil.colors.
gulp.task('default', function () {
    //log 日志输出
    gutil.log('message')
    // Compose multiple styles using the chainable API
    gutil.log(gutil.colors.red.bgBlue.bold('error'))
    // Combine styled and normal strings
    gutil.log(gutil.colors.green('message:') + "some")
})

经过测试rgb颜色不支持。
cli输出颜色

4. 配置 JS 任务

  1. glob

    glob模式是指 shell 所使用的简化了的正则表达式。nodejs的glob模块是glob模式的javascript实现版本。

    node-glob

    匹配规则 ^foot2

    *匹配任意 0 或多个任意字符
    ?匹配任意一个字符
    [...]若字符在中括号中，则匹配。若以 ! 或^开头，若字符不在中括号中，则匹配 !(pattern|pattern|pattern) 不满足括号中的所有模式则匹配
    ?(pattern|pattern|pattern)满足 0 或 1 括号中的模式则匹配
    +(pattern|pattern|pattern) 满足 1 或 更多括号中的模式则匹配 *(a|b|c) 满足 0 或 更多括号中的模式则匹配
    @(pattern|pat*|pat?erN) 满足 1 个括号中的模式则匹配 ** 跨路径匹配任意字符

  2. gulp-uglify 压缩js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var gulp = require('gulp')
    var uglify = require('gulp-uglify')

    gulp.task('uglifyjs', function () {
      //选则 src/js 目录下的所有 js 文件
        gulp.src('src/js/**/*.js')
            //压缩
            .pipe(uglify())
            //将压缩后的文件输出到 dist/js 目录下
            .pipe(gulp.dest('dist/js'))
    })

    gulp.task('default', function () {
      //当 gulp.watch 检测到 src/js/ 目录下的js文件有修改时会将所有文件全部编译。
        gulp.watch('src/js/**/*.js', ['uglifyjs'])
    })
编辑 `src/js/log.js` 文件并保存，命令行更新，表示检测到 `src/js/**/*.js` 文件修改后重新编译所有 js。
![gulp-uglifyjs][4]

  1. gulp-watch-path

    gulp.watch(glob[, opts], tasks)
gulp.watch(glob[, opts, cb])

    监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。详见API。

    gulp.watch 第二个参数为 function 时的用法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
        gulp.watch('src/js/**/*.js', function (event) {
        console.log(event);
        /*
    	当修改 src/js/log.js 文件时
        event {
    		// 发生改变的类型，不管是添加，改变或是删除
            type: 'changed', 
    		// 触发事件的文件路径
            path: '/Users/nimojs/Documents/code/gulp-book/demo/chapter7/src/js/log.js'
        }
        */
    })
    1
    2
    3
        gulp.watch('js/**/*.js', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
[gulp-watch-path][6]

This is for the expansion of the gulp.watch(event)

利用 `gulp-watch-path` 配合 `event`(检测当前修改的js文件) 获取编译路径和输出路径:

**`watchPath(event, search, replace, distExt)`**

| 参数 | 说明 |
|--------|--------|
|    event    |`gulp.watch` 回调函数的 `event`|
|    search   |需要被替换的起始字符串|
|    replace  |第三个参数是新的的字符串|
|   distExt   |扩展名(非必填)|


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
var gulp = require('gulp')
var gutil = require('gulp-util')

var uglify = require('gulp-uglify')
var watchPath = require('gulp-watch-path')

gulp.task('watchjs', function () {
    gulp.watch('src/js/**/*.js', function (event) {
        var paths = watchPath(event, 'src/', 'dist/')
        /*
        paths
            { srcPath: 'src/js/log.js',
              srcDir: 'src/js/',
              distPath: 'dist/js/log.js',
              distDir: 'dist/js/',
              srcFilename: 'log.js',
              distFilename: 'log.js' }
        */
        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
        gutil.log('Dist ' + paths.distPath)

        gulp.src(paths.srcPath)
            .pipe(uglify())
            .pipe(gulp.dest(paths.distDir))
    })
})

gulp.task('default', ['watchjs'])



![gulp watchjs][7]

  1. stream-combiner2 捕获错误信息

    Combining streams to handle errors

    By using stream-combiner2 you can turn a series of streams into a single stream, meaning you only need to listen to the error event in one place in your code.

    stream-combiner2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var combiner = require('stream-combiner2');
    var uglify = require('gulp-uglify');
    var gulp = require('gulp');

    gulp.task('test', function() {
      var combined = combiner.obj([
        gulp.src('bootstrap/js/*.js'),
        uglify(),
        gulp.dest('public/bootstrap')
      ]);

      // any errors in the above streams will get caught
      // by this listener, instead of being thrown:
      combined.on('error', console.error.bind(console));

      return combined;
    });
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
var gulp = require('gulp')
var gutil = require('gulp-util')
var uglify = require('gulp-uglify')
var watchPath = require('gulp-watch-path')
var combiner = require('stream-combiner2')

var handleError = function (err) {
    var colors = gutil.colors;
    console.log('\n')
    gutil.log(colors.red('Error!'))
    gutil.log('fileName: ' + colors.red(err.fileName))
    gutil.log('lineNumber: ' + colors.red(err.lineNumber))
    gutil.log('message: ' + err.message)
    gutil.log('plugin: ' + colors.yellow(err.plugin))
}

gulp.task('watchjs', function () {
    gulp.watch('src/js/**/*.js', function (event) {
        var paths = watchPath(event, 'src/', 'dist/')

        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
        gutil.log('Dist ' + paths.distPath)

        var combined = combiner.obj([
            gulp.src(paths.srcPath),
            uglify(),
            gulp.dest(paths.distDir)
        ])

        combined.on('error', handleError)
    })
})

gulp.task('default', ['watchjs'])


![捕获错误信息][10]

  1. 使用 SourceMap 进行压缩代码调试

    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
    var gulp = require('gulp')
    var gutil = require('gulp-util')
    var uglify = require('gulp-uglify')
    var watchPath = require('gulp-watch-path')
    var combiner = require('stream-combiner2')
    var sourcemaps = require('gulp-sourcemaps')

    var handleError = function (err) {
        var colors = gutil.colors;
        console.log('\n')
        gutil.log(colors.red('Error!'))
        gutil.log('fileName: ' + colors.red(err.fileName))
        gutil.log('lineNumber: ' + colors.red(err.lineNumber))
        gutil.log('message: ' + err.message)
        gutil.log('plugin: ' + colors.yellow(err.plugin))
    }

    gulp.task('watchjs', function () {
        gulp.watch('src/js/**/*.js', function (event) {
            var paths = watchPath(event, 'src/', 'dist/')
            
            gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
            gutil.log('Dist ' + paths.distPath)

            var combined = combiner.obj([
                gulp.src(paths.srcPath),
                sourcemaps.init(),
                uglify(),
                sourcemaps.write('./'),
                gulp.dest(paths.distDir)
            ])

            combined.on('error', handleError)
        })
    })

    gulp.task('default', ['watchjs'])

    生成对应的 .map 文件，可在浏览器中调试。

    gulp-uglifyjs压缩所有js文件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    gulp.task('uglifyjs', function () {
        var combined = combiner.obj([
            gulp.src('src/js/**/*.js'),
            sourcemaps.init(),
            uglify(),
            sourcemaps.write('./'),
            gulp.dest('dist/js/')
        ])
        combined.on('error', handleError)
    })

5. 配置 CSS 任务

  1. gulp-clean-css
    同js压缩。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    var cleancss = require('gulp-clean-css')

    gulp.task('watchcss', function () {
        gulp.watch('src/css/**/*.css', function (event) {
            var paths = watchPath(event, 'src/', 'dist/')

    		gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
            gutil.log('Dist ' + paths.distPath)

            gulp.src(paths.srcPath)
                .pipe(sourcemaps.init())
                .pipe(cleancss())
                .pipe(sourcemaps.write('./'))
                .pipe(gulp.dest(paths.distDir))
        })
    })

    gulp.task('default', ['watchjs','watchcss'])

  2. gulp-autoprefixer
    autoprefixer 解析 CSS 文件并且添加浏览器前缀到CSS规则里。
    gulp-autoprefixer

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
        const gulp = require('gulp');
        const autoprefixer = require('gulp-autoprefixer');

        gulp.task('default', () =>
    	    gulp.src('src/app.css')
    		.pipe(autoprefixer({
    			    browsers: ['last 2 versions'],
    			    cascade: false
    	  	}))
    		.pipe(gulp.dest('dist'))
    );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
gulp.task('watchcss', function () {
    gulp.watch('src/css/**/*.css', function (event) {
        var paths = watchPath(event, 'src/', 'dist/')

		gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
        gutil.log('Dist ' + paths.distPath)

        gulp.src(paths.srcPath)
            .pipe(sourcemaps.init())
            .pipe(autoprefixer({
              browsers: 'last 2 versions'
            }))
            .pipe(cleancss())
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(paths.distDir))
    })
})


![添加浏览器前缀][12]

  1. gulp-clean-css压缩所有css文件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    gulp.task('cleanCss', function () {
            gulp.src('src/css/**/*.css')
            .pipe(sourcemaps.init())
            .pipe(autoprefixer({
                browsers: 'last 2 versions'
            }))
            .pipe(cleancss())
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest('dist/css/'))
    })

    gulp sourcemaps

6. 配置 Less 任务

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
var less = require('gulp-less')

gulp.task('watchless', function () {
    gulp.watch('src/less/**/*.less', function (event) {
        var paths = watchPath(event, 'src/less/', 'dist/css/')

		gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
        gutil.log('Dist ' + paths.distPath)
        var combined = combiner.obj([
            gulp.src(paths.srcPath),
            sourcemaps.init(),
            autoprefixer({
              browsers: 'last 2 versions'
            }),
            less(),
            cleancss(),
            sourcemaps.write('./'),
            gulp.dest(paths.distDir)
        ])
        combined.on('error', handleError)
    })
})

gulp.task('lesscss', function () {
    var combined = combiner.obj([
            gulp.src('src/less/**/*.less'),
            sourcemaps.init(),
            autoprefixer({
              browsers: 'last 2 versions'
            }),
            less(),
            cleancss(),
            sourcemaps.write('./'),
            gulp.dest('dist/css/')
        ])
    combined.on('error', handleError)
})

gulp.task('default', ['watchjs', 'watchcss', 'watchless'])

7. 配置 Sass 任务

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
var sass = require('gulp-sass')

gulp.task('watchsass',function () {
    gulp.watch('src/sass/**/*', function (event) {
        var paths = watchPath(event, 'src/sass/', 'dist/css/')

		gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
        gutil.log('Dist ' + paths.distPath)
        sass(paths.srcPath)
            .on('error', function (err) {
                console.error('Error!', err.message);
            })
            .pipe(sourcemaps.init())
            .pipe(cleancss())
            .pipe(autoprefixer({
              browsers: 'last 2 versions'
            }))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(paths.distDir))
    })
})

gulp.task('sasscss', function () {
        sass('src/sass/')
        .on('error', function (err) {
            console.error('Error!', err.message);
        })
        .pipe(sourcemaps.init())
        .pipe(cleancss())
        .pipe(autoprefixer({
          browsers: 'last 2 versions'
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist/css'))
})

gulp.task('default', ['watchjs', 'watchcss', 'watchless', 'watchsass', 'watchsass'])

8. 配置 image 任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var imagemin = require('gulp-imagemin')

gulp.task('watchimage', function () {
    gulp.watch('src/images/**/*', function (event) {
        var paths = watchPath(event,'src/','dist/')

		gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
        gutil.log('Dist ' + paths.distPath)

        gulp.src(paths.srcPath)
            .pipe(imagemin({
                progressive: true
            }))
            .pipe(gulp.dest(paths.distDir))
    })
})

gulp.task('image', function () {
    gulp.src('src/images/**/*')
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('dist/images/'))
})

9. 配置文件复制任务

复制 src/fonts/ 文件到 dist/ 中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
gulp.task('watchcopy', function () {
    gulp.watch('src/fonts/**/*', function (event) {
        var paths = watchPath(event)

		gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
        gutil.log('Dist ' + paths.distPath)

        gulp.src(paths.srcPath)
            .pipe(gulp.dest(paths.distDir))
    })
})

gulp.task('copy', function () {
    gulp.src('src/fonts/**/*')
        .pipe(gulp.dest('dist/fonts/'))
})

gulp.task('default', ['watchjs', 'watchcss', 'watchless', 'watchsass', 'watchimage', 'watchcopy'])

10. 总结

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
var gulp = require('gulp')
// gutil.log gutil.colors
var gutil = require('gulp-util')
// 压缩js
var uglify = require('gulp-uglify')
// 获取编译路径和输出路径
var watchPath = require('gulp-watch-path')
// stream-combiner2 捕获错误信息
var combiner = require('stream-combiner2')
// 使用 SourceMap 进行压缩代码调试
var sourcemaps = require('gulp-sourcemaps')
// 获取 clean-css 模块（用于压缩 CSS）
var cleancss = require('gulp-clean-css')
// 获取 gulp-autoprefixer 模块
var autoprefixer = require('gulp-autoprefixer')
// 获取 gulp-less 模块
var less = require('gulp-less')
// 获取 gulp-ruby-sass 模块
var sass = require('gulp-ruby-sass')
// 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin')

//cli错误信息输出颜色
var handleError = function(err){
  var colors = gutil.colors;
  console.log('\n')
  gutil.log(colors.red('Error!'))
  gutil.log('fileName: '+ colors.red(err.fileName))
  gutil.log('lineNumber: '+ colors.red(err.lineNumber))
  gutil.log('message: '+ err.message)
  gutil.log('plugin: '+ colors.yellow(err.plugin))
}

// gulp.watch('js/**/*.js', function(event) {
// console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
// });
//watchjs压缩有修改的js文件
gulp.task('watchjs',function(){
  gulp.watch('src/js/**/*.js',function(event){

    var paths = watchPath(event,'src/','dist/')

    gutil.log(gutil.colors.green(event.type)+ ' '+ paths.srcPath)
    gutil.log('Dist '+ paths.distPath)

    //   gulp.src('paths.srcPath')
    //     .pipe(uglify())
    //     .pipe(gulp.dest('paths.distDir'))
    // })
    var combined = combiner.obj([
      gulp.src('paths.srcPath'),
        sourcemaps.init(), //sourcemaps第一句
        uglify(),
        sourcemaps.write('./'),//sourcemaps第二句
        gulp.dest('paths.distDir')
    ])
    combined.on('error',handleError)
})
})

// gulp.task('uglifyjs', function() {
//     gulp.src('src/js/**/*.js')
//         .pipe(uglify())
//         .pipe(gulp.dest('dist/js'))
// })
// gulp.task('auto',function(){
//   gulp.watch('src/js/**/*.js',['uglifyjs'])
// })
// gulp.task('default',['uglifyjs','auto'])

//uglifyjs压缩所有js文件
gulp.task('uglifyjs', function() {
  var combined = combiner.obj([
    gulp.src('src/js/**/*.js'),
      sourcemaps.init(), //sourcemaps第一句
      uglify(),
      sourcemaps.write('./'),//sourcemaps第二句
      gulp.dest('dist/js/')
  ])
  combined.on('error',handleError)
})


//watchcss压缩有修改的css文件
gulp.task('watchcss',function(){
  gulp.watch('src/css/**/*.css',function(event){

    var paths = watchPath(event,'src/','dist/')

    gutil.log(gutil.colors.green(event.type)+ ' '+ paths.srcPath)
    gutil.log('Dist '+ paths.distPath)

      gulp.src('paths.srcPath')
        .pipe(sourcemaps.init())
        // autoprefixer 解析 CSS 文件并且添加浏览器前缀到CSS规则里
        .pipe(autoprefixer({
          browsers: 'last 2 versions'
        }))

        .pipe(cleancss())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('paths.distDir'))
})
})

//cleanCss压缩所有css文件
gulp.task('cleanCss', function() {
  gulp.src('src/css/**/*.css')
    .pipe(sourcemaps.init())
    // autoprefixer 解析 CSS 文件并且添加浏览器前缀到CSS规则里
    .pipe(autoprefixer({
      browsers: 'last 2 versions'
    }))

    .pipe(cleancss())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('dist/css/'))
})


//watchless压缩有修改的less文件
gulp.task('watchless',function(){
  gulp.watch('src/less/**/*.less',function(event){

    var paths = watchPath(event,'src/less/','dist/css/')

    gutil.log(gutil.colors.green(event.type)+ ' '+ paths.srcPath)
    gutil.log('Dist '+ paths.distPath)

    var combined = combiner.obj([
      gulp.src('paths.srcPath'),
        sourcemaps.init(),
        autoprefixer({
          browsers: 'last 2 versions'
        }),
        less(),
        cleancss(),
        sourcemaps.write('./'),
        gulp.dest('paths.distDir')
    ])
    combined.on('error',handleError)
})
})

//lesscss压缩所有less文件
gulp.task('lesscss', function() {
  var combined = combiner.obj([
    gulp.src('src/less/**/*.less'),
      sourcemaps.init(),
      autoprefixer({
        browsers: 'last 2 versions'
      }),
      less(),
      cleancss(),
      sourcemaps.write('./'),
      gulp.dest('dist/css/')
  ])
  combined.on('error',handleError)
})


//watchsass压缩有修改的css文件
// gulp.task('sass', function() {
//     return sass('sass/')
//     .on('error', function (err) {
//       console.error('Error!', err.message);
//    })
//     .pipe(gulp.dest('dist/css'))
// });
gulp.task('watchsass',function(){
  gulp.watch('src/sass/**/*',function(event){

    var paths = watchPath(event,'src/sass/','dist/css/')

    gutil.log(gutil.colors.green(event.type)+ ' '+ paths.srcPath)
    gutil.log('Dist '+ paths.distPath)

      sass('paths.srcPath')
        .on('error', function (err) {
          console.error('Error!', err.message);
        })

        .pipe(sourcemaps.init())
        .pipe(cleancss())
        // autoprefixer 解析 CSS 文件并且添加浏览器前缀到CSS规则里
        .pipe(autoprefixer({
          browsers: 'last 2 versions'
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('paths.distDir'))
})
})

//sasscss压缩所有sass文件
gulp.task('sasscss', function() {
  sass('src/sass/')
  .on('error', function (err) {
    console.error('Error!', err.message);
  })
    .pipe(sourcemaps.init())
    .pipe(cleancss())
    // autoprefixer 解析 CSS 文件并且添加浏览器前缀到CSS规则里
    .pipe(autoprefixer({
      browsers: 'last 2 versions'
    }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('dist/css/'))
})


//watchimage压缩有修改的image文件
// gulp.task('images', function () {
//     // 1. 找到图片
//     gulp.src('images/*.*')
//     // 2. 压缩图片
        // .pipe(imagemin({
        //     progressive: true
        //     //无损压缩jpg图片
        // }))
//     // 3. 另存图片
//         .pipe(gulp.dest('dist/images'))
// });
gulp.task('watchimage',function(){
  gulp.watch('src/images/**/*',function(event){

    var paths = watchPath(event,'src/','dist/')

    gutil.log(gutil.colors.green(event.type)+ ' '+ paths.srcPath)
    gutil.log('Dist '+ paths.distPath)

      gulp.src('paths.srcPath')
        .pipe(imagemin({
            progressive: true
            //无损压缩jpg图片
        }))
        .pipe(gulp.dest('paths.distDir'))
})
})

//image压缩所有image文件
gulp.task('image', function() {
  gulp.src('src/images/**/*')
  .pipe(imagemin({
      progressive: true
      //无损压缩jpg图片
  }))
    .pipe(gulp.dest('dist/images/'))
})

//watchcopy复制src/fonts/内有修改的文件
gulp.task('watchcopy', function () {
    gulp.watch('src/fonts/**/*', function (event) {
        var paths = watchPath(event,'src/', 'dist/')

        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
        gutil.log('Dist ' + paths.distPath)

        gulp.src(paths.srcPath)
            .pipe(gulp.dest(paths.distDir))
    })
})

//copy复制src/fonts/内所有文件
gulp.task('copy', function() {
  gulp.src('src/fonts/**/*')
    .pipe(gulp.dest('dist/fonts/'))
})


gulp.task('default', [
    'uglifyjs', 'cleanCss', 'lesscss', 'sasscss', 'image', 'copy',
    'watchjs', 'watchcss', 'watchless', 'watchsass', 'watchimage', 'watchcopy'
    ]
)

编译全部

周末学习了gulp，最后把学习过的代码完整地打了一遍，调试了一会就全部编译成功了。也终于感觉到了gulp作为构建工具的方便快捷。楽しい！
今天再看看相关的扩展和别人的经验总结~