学习ES6的项目中用到了gulp-babel编译ES6代码，还有gulp-browserify等，所以学习一下gulp。
1.介绍
中文官网写着gulp是增强工作流程的自动化构建工具。
通过编写gulp配置代码，能让gulp自动执行前端开发中的重复工作。
Gulp通过流和代码优于配置策略来尽量简化任务编写的工作。
根据gulp的文档，它努力实现的主要特性是：^footnote
易于使用：采用代码优于配置策略，gulp让简单的事情继续简单，复杂的任务变得可管理。
高效：通过利用node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。
高质量：gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。
易于学习：通过把API降到最少，你能在很短的时间内学会gulp。构建工作就像你设想的一样：是一系列流管道。
gulp相比于grunt，配置更简洁运行速度更快^footnote2。
2.安装
gulp基于node实现，需要先安装node。我在装atom前已经装好啦。
使用管理员权限全局安装
$ sudo npm install -g gulp检查一下
$ gulp -v
3.创建项目
所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。
$ npm init
$ npm install gulp --save-dev
--save-dev保存配置信息至 package.json 的 devDependencies 节点。
4.使用 gulp 压缩 JS
接下来的操作都根据参考中的gulp-book进行。
gulpfile.js1
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// 获取 gulp
var gulp = require('gulp')
// require() 是 node （CommonJS）中获取模块的语法。在 gulp 中你只需要理解 require() 可以获取模块。
// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify')
// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
// 1. 找到文件
gulp.src('js/*.js')
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
})
//实现gulp 压缩 js 文件的自动化代码编写
//没有命令可以运行 gulp.watch()，需要将 gulp.watch() 包含在一个任务中。
//在命令行使用 gulp auto 启动此任务,自动监听 js/*.js 文件的修改后压缩js。
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script'])
})
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['script', 'auto'])
gulp.task(name, fn)- 定义任务，name是任务名，fn是任务内容。
fn该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。gulp.task(name[, deps], fn)一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。1
2
3gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
// 做一些事
});gulp.src(path)- 选择文件，传入参数是文件路径。gulp.dest(path)- 输出文件。gulp.pipe()- 管道，你可以暂时将 pipe 理解为将操作加入执行队列。gulp.watch(src, fn)- 检测指定目录下文件的修改后执行任务。gulp.task('default', fn)- 定义默认任务,在命令行直接输入 gulp +回车 运行
4.使用 gulp 压缩 CSS
$ npm install gulp-clean-css --save-dev
gulpfile.js1
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// 获取 gulp
var gulp = require('gulp')
// 获取 clean-css 模块（用于压缩 CSS）
var cleanCSS = require('gulp-clean-css')
// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
// 1. 找到文件
gulp.src('css/*.css')
// 2. 压缩文件
.pipe(cleanCSS())
// 3. 另存为压缩文件
.pipe(gulp.dest('dist/css'))
})
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 css 任务
gulp.watch('css/*.css', ['css'])
});
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 css 任务和 auto 任务
gulp.task('default', ['css', 'auto'])
5.使用 gulp 压缩图片
$ npm install --save-dev gulp-imagemin
gulpfile.js1
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// 获取 gulp
var gulp = require('gulp');
// 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin')
// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
// 1. 找到图片
gulp.src('images/*.*')
// 2. 压缩图片
.pipe(imagemin({
progressive: true
//无损压缩jpg图片
}))
// 3. 另存图片
.pipe(gulp.dest('dist/images'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 images 任务
gulp.watch('images/*.*', ['images'])
});
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 images 任务和 auto 任务
gulp.task('default', ['images', 'auto'])
其他参数1
2
3
4
5
6.pipe(imagemin({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
}))
深度压缩图片1
2
3
4
5
6
7
8
9
10
11
12
13
14var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
//确保本地已安装imagemin-pngquant [npm install imagemin-pngquant --save-dev]
pngquant = require('imagemin-pngquant');
gulp.task('images', function () {
gulp.src('images/*.*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
}))
.pipe(gulp.dest('dist/images'));
});
只压缩修改的图片
使用”gulp-cache”只压缩修改的图片，没有修改的图片直接从缓存文件读取（C:\Users\Administrator\AppData\Local\Temp\gulp-cache）。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
//确保本地已安装gulp-cache [cnpm install gulp-cache --save-dev]
cache = require('gulp-cache');
gulp.task('images', function () {
gulp.src('images/*.*')
.pipe(cache(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
})))
.pipe(gulp.dest('dist/images'));
});
5.使用 gulp 编译 LESS
$ npm install gulp-less --save-dev
gulpfile.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25// 获取 gulp
var gulp = require('gulp')
// 获取 gulp-less 模块
var less = require('gulp-less')
// 编译less
// 在命令行输入 gulp less 启动此任务
gulp.task('less', function () {
// 1. 找到 less 文件
gulp.src('less/**.less')
// 2. 编译为css
.pipe(less())
// 3. 另存文件
.pipe(gulp.dest('dist/css'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 less 任务
gulp.watch('less/**.less', ['less'])
})
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 less 任务和 auto 任务
gulp.task('default', ['less', 'auto'])
5.使用 gulp 编译 Sass
$ npm install gulp-ruby-sass --save-dev
gulpfile.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25// 获取 gulp
var gulp = require('gulp')
// 获取 gulp-ruby-sass 模块
var sass = require('gulp-ruby-sass')
// 编译sass
// 在命令行输入 gulp sass 启动此任务
gulp.task('sass', function() {
return sass('sass/')
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(gulp.dest('dist/css'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 sass 任务
gulp.watch('sass/**/*.scss', ['sass'])
});
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 sass 任务和 auto 任务
gulp.task('default', ['sass', 'auto'])
