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使用指南

3、Gulp：任务自动管理工具

4、Gulp安装及配合组件构建前端开发一体化

5、gulp详细入门教程

6、BrowserSync + Gulp.js

7、Gulp.js-LiveReload 自動刷新頁面

8、https://www.npmjs.com/package/gulp

9、Getting Started with Gulp

10、gulp plugins 插件介绍

11、前端构建工具gulpjs的使用介绍及技巧