Gulp基于Node.js的前端构建工具，通过Gulp的插件可以实现前端代码的编译（sass、less）、压缩、测试；图片的压缩；浏览器自动刷新，还有许多强大的插件可以在这里查找。

Gulp的安装

Gulp中文网 ：http://www.gulpjs.com.cn/
1,首先我们要全局安装一遍：
在终端输入npm install --global gulp
我们在项目文件夹下面，再运行一遍npm install gulp
然后输入npm init 初始化
当前文件夹下面会生成package.json文件

2,作为项目的开发依赖（devDependencies）安装：
在终端输入npm install --save-dev gulp
—save-dev这个属性会将条目保存到你package.json的devDependencies里面

3，在项目根目录下创建一个名为gulpfile.js的文件，js文件里面的输入以下格式的代码：

4,运行gulp
在终端输入gulp zq
这里名为zq的任务（task）将会被运行，输出的结果就是 “这是输出结果”
如果想同时执行多个任务，请输入gulp task1 task2 task3 ... .

Gulp插件的安装

我们常用的插件：
推荐网址：http://gulpjs.com/plugins/

npm install --save-dev gulp-ruby-sass sass的编译


npm install --save-dev gulp-autoprefixer 自动添加css前缀


npm install --save-dev gulp-minify 压缩css


npm install --save-dev gulp-jshint js代码校验


npm install --save-dev gulp-concat 合并js文件

var concat = require('gulp-concat');
gulp.task('scripts', function() {
    return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
    });

gulp.task('scriptsb', function() {
    return gulp.src(['lib/zq1.js','lib/zq2.js','lib/zq3.js'])
    .pipe(concat('allb.js'))
    .pipe(gulp.dest('./dist/'))
});                                        

npm install --save-dev gulp-jsmin 压缩js文件


npm install --save-dev gulp-imagemin 压缩图片

var imagemin=require('gulp-imagemin')
var rename = require('gulp-rename');
gulp.task('imagemin',()=>
    gulp.src('lib/*')
    .pipe(imagemin())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/images/'))
)

npm install --save-dev gulp-livereload 自动刷新页面


npm install --save-dev gulp-cache 图片缓存，只有图片替换了才压缩


npm install --save-dev gulp-nitify 更改提醒


npm install --save-dev gulp-del 清除文件


npm install --save-dev gulp-jade html/js转换

var jade=require('gulp-jade')
gulp.task('jade',function(){
    gulp.src('html_project/view/html1.jade')
    .pipe(jade())
    .pipe(gulp.dest('html_project/desk/html/'))
    })   


doctype
html
    head
        meta(charset="UTF-8")
        title Document
        link(rel='stylesheet',href='../../src/css/css.css')
    body
        include header.jade
        h2#hh.hh 我是h2标签
        include footer.jade
        div.yejiao 我是页脚