前端工具之Gulp

soyizi

　　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任务了。