Gulp

Gulp 简介 安装 Node 和 gulp 使用 gulp 压缩 JS 使用 gulp 压缩 CSS 使用 gulp 压缩图片 使用 gulp 编译 LESS 使用 gulp 编译 Sass 使用 gulp 构建一个项目 配置 JS 任务 配置 CSS 任务 配置 Less 任务 配置 Sass 任务 配置 image 任务 配置文件复制任务
  1. Gulp
  2. 配置 JS 任务

配置 JS 任务

gulp-uglify

检测src/js/目录下的 js 文件修改后，压缩 js/ 中所有 js 文件并输出到 dist/js/ 中

View Raw Code?
1
2
3
4
5
6
7
8
9
10
11
var uglify = require('gulp-uglify')
gulp.task('uglifyjs', function () {
gulp.src('src/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
gulp.task('default', function () {
gulp.watch('src/js/**/*.js', ['uglifyjs'])
})

src/js/**/*.js 是 glob 语法。

在命令行输入 gulp 后会出现如下消息，表示已经启动。

View Raw Code?
1
2
3
[20:39:50] Using gulpfile ~/Documents/code/gulp-book/demo/chapter7/gulpfile.js
[20:39:50] Starting 'default'...
[20:39:50] Finished 'default' after 13 ms
此时编辑 src/js/log.js 文件并保存，命令行会出现如下消息，表示检测到 src/js/**/*.js 文件修改后重新编译所有 js。
View Raw Code?
1
2
[20:39:52] Starting 'js'...
[20:39:52] Finished 'js' after 14 ms

gulp-watch-path

此配置有个性能问题，当 gulp.watch 检测到 src/js/ 目录下的js文件有修改时会将所有文件全部编译。实际上我们只需要重新编译被修改的文件。

简单介绍 gulp.watch 第二个参数为 function 时的用法。

View Raw Code?
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'
}
*/
})
我们可以利用 event 给到的信息，检测到某个 js 文件被修改时，只编写当前修改的 js 文件。

可以利用 gulp-watch-path 配合 event 获取编译路径和输出路径。

View Raw Code?
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 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'])

watchPath(event, search, replace, distExt)

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

此时编辑 src/js/log.js 文件并保存，命令行会出现消息，表示检测到 src/js/log.js 文件修改后只重新编译 log.js。


View Raw Code?
1
2
[21:47:25] changed src/js/log.js
[21:47:25] Dist dist/js/log.js

stream-combiner2

编辑 log.js 文件时，如果文件中有 js 语法错误时，gulp 会终止运行并报错。

当 log.js 缺少 )

View Raw Code?
1
log('gulp-book')
并保存文件时出现如下错误，但是错误信息不全面。而且还会让 gulp 停止运行。



View Raw Code?
1
2
3
4
5
6
7
8
9
10
events.js:85
throw er; // Unhandled 'error' event
^
Error
at new JS_Parse_Error (/Users/nimojs/Documents/code/gulp-book/demo/chapter7/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:189:18)
...
...
js_error (/Users/nimojs/Documents/code/gulp-book/demo/chapter7/node_modules/gulp-
-book/demo/chapter7/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1165:20)
at maybe_unary (/Users/nimojs/Documents/code/gulp-book/demo/chapter7/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1328:19)
应对这种情况，我们可以使用 Combining streams to handle errors 文档中推荐的 stream-combiner2 捕获错误信息。



View Raw Code?
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
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))
}
var combiner = require('stream-combiner2')
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)
var combined = combiner.obj([
gulp.src(paths.srcPath),
uglify(),
gulp.dest(paths.distDir)
])
combined.on('error', handleError)
})
})
此时当编译错误的语法时，命令行会出现错误提示。而且不会让 gulp 停止运行。



View Raw Code?
1
2
3
4
5
6
7
8
changed:src/js/log.js
dist:dist/js/log.js
--------------
Error!
fileName: /Users/nimojs/Documents/code/gulp-book/demo/chapter7/src/js/log.js
lineNumber: 7
message: /Users/nimojs/Documents/code/gulp-book/demo/chapter7/src/js/log.js: Unexpected token eof «undefined», expected punc «,»
plugin: gulp-uglify
gulp-sourcemaps

JS 压缩前和压缩后比较

View Raw Code?
1
2
3
4
5
6
7
8
9
10
11
// 压缩前
var log = function (msg) {
console.log('--------');
console.log(msg)
console.log('--------');
}
log({a:1})
log('gulp-book')
// 压缩后
var log=function(o){console.log("--------"),console.log(o),console.log("--------")};log({a:1}),log("gulp-book");
压缩后的代码不存在换行符和空白符，导致出错后很难调试，好在我们可以使用 sourcemap 帮助调试



View Raw Code?
1
2
3
4
5
6
7
8
9
10
var sourcemaps = require('gulp-sourcemaps')
// ...
var combined = combiner.obj([
gulp.src(paths.srcPath),
sourcemaps.init(),
uglify(),
sourcemaps.write('./'),
gulp.dest(paths.distDir)
])
// ...

此时 dist/js/ 中也会生成对应的 .map 文件，以便使用 Chrome 控制台调试代码

至此，我们完成了检测文件修改后压缩 JS 的 gulp 任务配置。

有时我们也需要一次编译所有 js 文件。可以配置 uglifyjs 任务。

View Raw Code?
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)
})
在命令行输入 gulp uglifyjs 以压缩 src/js/ 下的所有 js 文件。


站内导航
HTML5 | CSS3 | JavaScrip | HTML DOM | JSON | PHP7 | XML | XML DOM | XSLT | DTD | XML Schema | 开发手册 | php手册 | 破解软件 | 技术分享 | Blog
联系我们

邮箱 626512443@qq.com
电话 18611320371(微信)
QQ群 235681453

友情链接
百郎科技 | Linux命令大全 | xin站大全 | 厦门SEO | 探趣吧 | 北京医院跑腿

Copyright © 2015-2024

备案号：京ICP备15003423号-3