前端工具之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任务了。