Gulp 学习总结
Gulp 自动化工具开发非常方便，便于上手，值得使用。
一、Gulp安装
gulp是基于NodeJS运行的，所以需要想安装NodeJS. http://nodejs.org/download/
安装gulp
# 安装全局环境
npm install gulp -g
#安装本地环境
npm install gulp --save-dev
二、Gulp插件安装
npm install browser-sync gulp-compass gulp-sass gulp-rename gulp-jshint gulp-uglify gulp-concat gulp-imagemin gulp-cache gulp-connect gulp-minify-css gulp-sourcemaps gulp-notify gulp-livereload gulp-clean gulp-load-plugins gulp-rev-append gulp-make-css-url-version --save-dev
插件可根据自己的需求安装，分别代表：
1、编译Sass,生成雪碧图(gulp-compass);
2、编译sass(gulp-sass);
3、sass浏览器地图(gulp-sourcemaps);
4、重命名文件(gulp-rename);
5、JS语法检测(gulp-jshint);
6、JS丑化(gulp-uglify);
7、JS文件合并(gulp-concat);
8、图片压缩(gulp-imagemin);
9、缓存通知(gulp-cache);
10、web服务(gulp-connect);
11、压缩CSS(gulp-minify-css);
12、css文件引用URL图片加版本号(gulp-make-css-url-version);
13、清空文件夹(gulp-clean);
14、更新通知(gulp-notify);
15、html文件引用加版本号(gulp-rev-append);
16、web服务浏览器同步浏览(browser-sync); // 推荐使用这个作为web服务
三、创建配置文件gulpfile.js
1、引入插件
var gulp = require('gulp'),
compass = require('gulp-compass'), // compass编译Sass, 生成雪碧图
sass = require('gulp-sass'), // sass编译
sourcemaps = require('gulp-sourcemaps'), // sass地图
rename = require('gulp-rename'), // 重命名文件
jshint = require('gulp-jshint'), // JS语法检测
uglify = require('gulp-uglify'), // JS丑化
concat = require('gulp-concat'), // JS拼接
imagemin = require('gulp-imagemin'), // 图片压缩
cache = require('gulp-cache'), // 缓存通知
connect = require('gulp-connect'), // web服务
minifycss = require('gulp-minify-css'), // 压缩CSS
cssver = require('gulp-make-css-url-version'), // css文件引用URL加版本号
clean = require('gulp-clean'), // 清空文件夹
notify = require('gulp-notify'), // 更新通知
rev = require('gulp-rev-append'), // html添加版本号
browserSync = require('browser-sync'), // 浏览器同步
reload = browserSync.reload; // 自动刷新
2、配置开发路径，结构为：
/*****项目结构*****
* project(项目名称)
* |–node_modules 组件目录
* |–dist 发布环境
* |–css 样式文件(压缩)
* |–images 图片文件(压缩图片)
* |–js js文件(压缩)
* |–index.html 静态文件(压缩html)
* |–dev 生产环境
* |–sass sass文件
* |–images 图片文件
* |–js js文件
* |–index.html 静态文件
* |–config.rb Compass配置文件
* |–package.json 项目信息
* |–gulpfile.js gulp任务文件
**/
gulpfile.js配置文件中的路径为：
// 路径变量
var path = {
// 开发环境
dev: {
html: './dev',
js: './dev/js',
sass: './dev/sass',
css: './dev/css',
image: './dev/images'
},
// 发布环境
dist: {
html: './dist',
js: './dist/js',
css: './dist/css',
image: './dist/images'
}
};
3、构建gulp执行任务
// 定义web服务模块，增加浏览器同步浏览
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: '.'
}
});
});
// 创建Compass任务，编译Sass生成雪碧图
gulp.task('compass', function() {
gulp.src(path.dev.sass+'/*.scss')
.pipe(compass({
config_file: './config.rb', // 配置文件
css: path.dev.css, // 编译路径
sass: path.dev.sass // sass路径
//image: path.dev.image // 图片路径，用于生成雪碧图
}))
.pipe(cssver()) // CSS文件引用URl加版本号
.pipe(minifycss()) // 压缩CSS
.pipe(gulp.dest(path.dist.css)) // 发布到线上版本
.pipe(reload({stream: true}));
});
// 压缩HTML
gulp.task('html', function() {
gulp.src(path.dev.html+"/*.html")
.pipe(rev()) // html 引用文件添加版本号
.pipe(gulp.dest(path.dist.html))
.pipe(reload({stream: true}));
});
//检查脚本
gulp.task('lint', function() {
gulp.src(path.dev.js+'/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});// 图片压缩
gulp.task('image', function() {
gulp.src(path.dev.image+'/*.*')
.pipe(cache(imagemin()))
.pipe(reload({stream: true}))
.pipe(gulp.dest(path.dist.image));
//.pipe(notify({ message: '图片压缩'}));
});
// 合并压缩JS文件
gulp.task('script', function() {
gulp.src(path.dev.js+'/*.js')
//.pipe(concat('all.js')) // 合并
//.pipe(gulp.dest(path.dist.js))
//.pipe(rename('all.min.js')) // 重命名
.pipe(uglify()) // 压缩
.pipe(gulp.dest(path.dist.js))
//.pipe(notify({ message: 'JS合并压缩' }))
.pipe(reload({stream: true}));
});
// 清空文件夹
gulp.task('clean', function() {
gulp.src([path.dist.css, path.dist.js, path.dist.image], {read: false})
.pipe(clean());
});
// 默认任务
gulp.task("default", function() {
gulp.run('browser-sync', 'lint', 'compass', 'script', 'image');
// 检测文件发送变化 - 分开监听为了执行对应的命令
gulp.watch(path.dev.html+'/*.*', ['html']);
gulp.watch(path.dev.sass+'/*.scss', ['compass']);
gulp.watch(path.dev.image+'/**', ['image']);
gulp.watch(path.dev.js+'/*.js', ['lint', 'script']);
});
注意：html文件引用增加版本号时，需要在html文件引用路径中增加 ?rev=@@hash 方可在编译时，自动添加版本号
<link rel="stylesheet" type="text/css" href="./css/main.css?rev=@@hash">
4、配置浏览器自动刷新问题
使用gulp的browser-sync插件可以实现浏览器自动刷新，同步浏览的功能，创建实现自动刷新，需要启动自动刷新的插件，在引入插件处
var browserSync = require('browser-sync'), // 浏览器同步
reload = browserSync.reload; // 自动刷新
之后，创建browser-sync的task任务，并在gulp的启用。
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: '.'
}
});
});
baseDir 为默认的服务访问路径，默认访问为 http://localhost:3000, 配置信息为 http://localhost:3001
然后在发生变化要刷新的任务处，添加如下语句即可。详情参考: BrowserSync + Gulp.js
.pipe(reload({stream: true}));
gulpfile.js完整文件如下：
/** * *****组件安装***** * npm install gulp browser-sync gulp-compass gulp-sass gulp-rename gulp-jshint gulp-uglify gulp-concat gulp-imagemin gulp-cache gulp-connect gulp-minify-css gulp-sourcemaps gulp-notify gulp-livereload gulp-clean gulp-load-plugins gulp-rev-append gulp-make-css-url-version --save-dev * * *****项目结构***** * project(项目名称) * |–.svn 通过svn管理项目会生成这个文件夹 * |–node_modules 组件目录 * |–dist 发布环境 * |–css 样式文件(style.css style.min.css) * |–images 图片文件(压缩图片) * |–js js文件(main.js main.min.js) * |–index.html 静态文件(压缩html) * |–dev 生产环境 * |–sass sass文件 * |–images 图片文件 * |–js js文件 * |–index.html 静态文件 * |–config.rb Compass配置文件
* |-package.json 项目信息 * |–gulpfile.js gulp任务文件 **/ // 引入 Gulp插件 var gulp = require('gulp'), compass = require('gulp-compass'), // compass编译Sass, 生成雪碧图 sass = require('gulp-sass'), // sass编译 sourcemaps = require('gulp-sourcemaps'), // sass地图 rename = require('gulp-rename'), // 重命名文件 jshint = require('gulp-jshint'), // JS语法检测 uglify = require('gulp-uglify'), // JS丑化 concat = require('gulp-concat'), // JS拼接 imagemin = require('gulp-imagemin'), // 图片压缩 cache = require('gulp-cache'), // 缓存通知 connect = require('gulp-connect'), // web服务 minifycss = require('gulp-minify-css'), // 压缩CSS cssver = require('gulp-make-css-url-version'), // css文件引用URL加版本号 clean = require('gulp-clean'), // 清空文件夹 notify = require('gulp-notify'), // 更新通知 rev = require('gulp-rev-append'), // html添加版本号 browserSync = require('browser-sync'), // 浏览器同步 reload = browserSync.reload; // 自动刷新 // 路径变量 var path = { // 开发环境 dev: { html: './dev', js: './dev/js', sass: './dev/sass', css: './dev/css', image: './dev/images' }, // 发布环境 dist: { html: './dist', js: './dist/js', css: './dist/css', image: './dist/images' } }; // 定义web服务模块 gulp.task('webserver', function() { connect.server({ livereload: true, port: 8888 }); }); // 定义web服务模块，增加浏览器同步浏览 gulp.task('browser-sync', function() { browserSync({ server: { baseDir: '.' } }); }); // 创建Compass任务，编译Sass生成雪碧图 gulp.task('compass', function() { gulp.src(path.dev.sass+'/*.scss') .pipe(compass({ config_file: './config.rb', // 配置文件 css: path.dev.css, // 编译路径 sass: path.dev.sass // sass路径 //image: path.dev.image // 图片路径，用于生成雪碧图 })) .pipe(cssver()) // CSS文件引用URl加版本号 .pipe(minifycss()) // 压缩CSS .pipe(gulp.dest(path.dist.css)) // 发布到线上版本 .pipe(reload({stream: true})); }); // 压缩HTML gulp.task('html', function() { gulp.src(path.dev.html+"/*.html") .pipe(rev()) // html 引用文件添加版本号 .pipe(gulp.dest(path.dist.html)) .pipe(reload({stream: true})); }); //检查脚本 gulp.task('lint', function() { gulp.src(path.dev.js+'/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); // 图片压缩 gulp.task('image', function() { gulp.src(path.dev.image+'/*.*') .pipe(cache(imagemin())) .pipe(reload({stream: true})) .pipe(gulp.dest(path.dist.image)); //.pipe(notify({ message: '图片压缩'})); }); // 合并压缩JS文件 gulp.task('script', function() { gulp.src(path.dev.js+'/*.js') //.pipe(concat('all.js')) // 合并 //.pipe(gulp.dest(path.dist.js)) //.pipe(rename('all.min.js')) // 重命名 .pipe(uglify()) // 压缩 .pipe(gulp.dest(path.dist.js)) //.pipe(notify({ message: 'JS合并压缩' })) .pipe(reload({stream: true})); }); // 清空文件夹 gulp.task('clean', function() { gulp.src([path.dist.css, path.dist.js, path.dist.image], {read: false}) .pipe(clean()); }); // 默认任务 gulp.task("default", function() { gulp.run('browser-sync', 'lint', 'compass', 'script', 'image'); // 检测文件发送变化 - 分开监听为了执行对应的命令 gulp.watch(path.dev.html+'/*.*', ['html']); gulp.watch(path.dev.sass+'/*.scss', ['compass']); gulp.watch(path.dev.image+'/**', ['image']); gulp.watch(path.dev.js+'/*.js', ['lint', 'script']); });
gulp-compass 合并雪碧图使用的 config.rb 配置文件，内容如下：
# Set this to the root of your project when deployed: http_path = "/" css_dir = "./dev/css" sass_dir = "./dev/sass" images_dir = "./dev/images" javascripts_dir = "./dev/js" # You can select your preferred output style here (can be overridden via the command line): # 合并雪碧图的方式 # output_style = :expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. Uncomment: # 相对路径 relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment: # line_comments = false # If you prefer the indented syntax, you might want to regenerate this # project again passing --syntax sass, or you can uncomment this: # preferred_syntax = :sass # and then run: # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
四、运行gulp
在项目目录下执行 gulp 命令就会运行 default 任务，并且启动监听，之所以分开设置监听任务，是为了执行对应命令，如果合并在一起执行，会增加编译时间。
五、gulpfile.js配置文件参数说明
1、gulp.task()
gulp模块的task方法，用于定义具体的任务，第一个参数为任务名，第二个参数为任务函数，如image任务，调用直接运行 gulp image
gulp.task('image', function() {
console.log('图片任务执行');
});
task方法也可以知道一组任务，如：
gulp.task('default',['html', 'sass', 'js']);
2、gulp.src()
gulp模块的src方法，用于产生数据流，表示要处理的文件，一般有以下几种格式：
- js/app.js：指定确切的文件名。
- js/*.js：某个目录所有后缀名为js的文件。
- js/**/*.js：某个目录及其所有子目录中的所有后缀名为js的文件。
- !js/app.js：除了js/app.js以外的所有文件。
- *.+(js|css)：匹配项目根目录下，所有后缀名为js或css的文件。
src方法的参数可以是一个数组，如：
gulp.src(['./js/*.js', './sass/*.scss']);
3、gulp.watch()
gulp模块的watch方法，用于指点需要监视的文件，一旦文件发生变动，就运行指点任务。
gulp.watch('./js/*.js', ['lint', 'script']);
4、pipe
.pipe为每个任务的连接，执行完一个任务之后，再次连接执行下一个任务，如：
.pipe(minifycss()) // 压缩CSS
.pipe(gulp.dest(path.dist.css)); // 发布到线上版本
先执行压缩，再发布到线上版本
六、gulp学习资料参考
1、Gulp.js：比 Grunt 更简单的自动化的项目构建利器
2、Gulp使用指南
8、https://www.npmjs.com/package/gulp
始终相信努力奋斗的意义，因为那是本质问题。
