前端工具之Gulp
Gulp是一款前端自动化的工具，如果能熟练使用Gulp来进行开发一定可以节省很多的时间，也可以快速的提高工作效率。
在使用Gulp之前就是要配置好Gulp安装的环境，这是我们能使用Gulp快速开发的第一步。
安装
~~~~~~~~~~~~~~
D1 NodeJS安装
Gulp是基于NodeJS运行的，所以第一步就是要先安装NodeJS， https://nodejs.org/en/。
安装好Node之后，在Node的Command里面安装全局环境以及本地环境
# 安装全局环境
npm install gulp -g
#安装本地环境
npm install gulp --save-dev
安装成功之后就可以进入下一步了，//gulp -v可以查看安装成功后的版本号。
D2 Ruby安装
Ruby安装地址：http://rubyinstaller.org/downloads
在Gulp中，有一个重要的编译工具就是sass, 利用sass可以快速的编译我们的css代码。因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。
在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境。
D2 SASS安装
安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby
然后直接在命令行中输入
gem install sass
这个方法可以最快速便捷的安装SASS， 但是由于可能被墙，不一定能安装成功，所以我们还可以用一种更加稳妥的方式来安装SASS.
淘宝RubyGems镜像安装 sass
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass
SASS安装成功之后就可以开始使用Gulp了， 以下会介绍一下Gulp的配置以及方法。
配置
~~~~~~~~~~~~~
D1 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服务
可以把之前配置好的文件整个复制到新的项目下也是可以的，节省了配置安装的时间
D2 创建配置文件gulpfile.js
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; // 自动刷新
D2 构建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']);
});
配置浏览器自动刷新问题
使用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}));
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
最后只要在cmd当前目录下输入gulp指令就会开始default任务了。
