Gulp与Grunt差不多,也是一款构建工具,它能够自动执行我们前端常见的任务,
如编译Sass、Less,压缩js和刷新浏览器等等,以此来改进前端的工作方式,提高生产力.

使用需用

 安装Node.js
    由于Gulp是基于Node.js构建的,
    所以在使用Gulp之前,首先安装Node.js(自行搜索node.js安装),
    安装Node.js方式非常简单,下载后运行安装包,一直下一步即可,
    安装完成后打开cmd控制台(window)输入 node-v 查询版本号确认node安装完毕。

初始化项目

让当前目录作为项目文件夹开始初始化,
项目初始化指令--> npm init 初始化完后会有一个package.json的文件里面是一些描述项目的一些记录,
项目名称、作者、开发时依赖的一些插件,

不初始化也可以使用gulp。

package.json 说明

name //项目名称
version //项目版本号
description //项目描述
homepage //项目官网url
author //作者名
contributors // 项目其他贡献者
dependencies //项目依赖列表
devDependencies //开发环境依赖的列表
repository //项目代码存放的地方类型, git/svn
main //它是一个模块ID它是一个指向你程序的主要项目
keywords //关键字

安装Gulp

在cmd控制台下输入命令进行安装Gulp -g代表是全局安装

npm install -g gulp

全局安装后,要想在项目里使用还得在项目的文件夹下,安装本地gulp --save-dev会把插件记录记录在package.json中。

npm install gulp -save-dev //在项目文件夹下使用

使用Gulp

在项目文件夹下创建一个 gulpfile.js 文件,

然后在gulpfile.js中开始编写gulp插件,

gulp常用插件 - - - - v

gulp-minify-css --- css压缩

上面流程走完后安装gulp-minify-css

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

然后开始编写 gulpfile.js文件

var gulp = requrie('gulp'); // 引入gulp
var minify=require('gulp-minify-css');//引入压缩css的模块
//创建一个压缩任务
gulp.task('minifycss',function(){
    //指定当前文件下的所有后缀为.css的文件
    gulp.src('*.css')
    //使用minify模块进行压缩
    .pipe(minify())
    //最终将压缩的文件输出到minicss文件下
    .pipe(gulp.dest('minicss'))
    })

gulp-uglify --- js压缩

以上为例安装压缩js的插件

npm install --save-dev gulp-uglify

var gulp =require('gulp'); //引入gulp
var uglify = require('gulp-uglify');//引入js压缩模块

//创建一个压缩js的任务
gulp.task('minifyjs',function(){
    //指定当前文件夹下的所有JS文件
    gulp.src('*.js')
    //进行重命名 可以设置名字为类似(mini.min.js)
    .pipe(rename({suffix:'.min'}))
    //进行压缩
    .pipe(uglify())
    //将压缩后的文件输出到minijs文件夹下
    .pipe(gulp.dest('minijs'))
})

gulp-minify-html --- html压缩

以上为例安装压缩html的插件

npm install --save-dev gulp-minify-html

var gulp =require('gulp'); //引入gulp
var minhtml =require('gulp-minify-html');//引入js压缩模块

//创建一个压缩html的任务
gulp.task('minhtml',function(){
    //指定当前文件夹下的所有html文件
    gulp.src('*.html')
    //进行压缩
    .pipe(minhtml())
    //将压缩后的文件输出到minihtml文件夹下
    .pipe(gulp.dest('minihtml'))
})

gulp-jshint --- 检查js

以上为例安装检测js的插件

npm install --save-dev jshint gulp-jshint

var gulp =require('gulp'); //引入gulp
var concat = require('gulp-jshint');//引入检测js文件模块

//创建一个检测js的任务
gulp.task('concat',function(){
    //指明要检测的文件
    gulp.src('*.js')
    .pipe(jshint())
    //输出检查结果
    .pipe(jshint.reporter());
})

gulp-concat --- 文件合并

以上为例安装文件合并的插件

npm install --save-dev gulp-concat

var gulp =require('gulp'); //引入gulp
var concat = require('gulp-concat');//引入合并文件模块

//创建一个合并任务
gulp.task('concat',function(){
    //指明要合并的文件
    gulp.src('*.js')
    //合并找到的js文件并命名为'merge.js'
    .pipe(concat('merge.js'))
    //将合并后的文件输出到concat文件夹下
    .pipe(gulp.dest('concat'));
})

gulp-less --- 编译Less

以上为例安装编译Less的插件

npm install --save-dev gulp-less

var gulp =require('gulp'); //引入gulp
var lecss = require('gulp-less');//引入编译模块

//创建一个编译任务
gulp.task('compile-less',function(){
    //指明要编译的文件
    gulp.src('*.less')
    //进行编译
    .pipe(lecss())
    //将编译后的文件输出到css文件夹下
    .pipe(gulp.dest('css'));
})

gulp-sass --- 编译Sass

以上为例安装编译Sass的插件

npm install --save-dev gulp-sass

var gulp =require('gulp'); //引入gulp
var sacss = require('gulp-sass');//引入编译模块

//创建一个编译任务
gulp.task('compile-sass',function(){
    //指明要编译的文件
    gulp.src('*.sass')
    //进行编译
    .pipe(sacss())
    //将编译后的文件输出到css文件夹下
    .pipe(gulp.dest('css'));
})

gulp-imagemin --- 压缩图片

以上为例安装压缩图片插件

npm install --save-dev gulp-imagemin

var gulp =require('gulp'); //引入gulp
var imagemin = require('gulp-imagemin');


//创建一个压缩任务
gulp.task('pngquant',function(){
    gulp.src('src/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive:true,//Boolean类型 默认:false 无损压缩图片
            optimizationLevel:5,//number类型 默认:3 取值范围:0-7(优化等级)
            interlced:true,//Boolean类型 默认false 隔行扫描gif进行渲染
            multipass:true //Boolean类型 默认false 多次优化svg直到完全优化
            //开始压缩png图片
        }))
        .pipe(gulp.dest('img'))

})

gulp-livereload --- 自动刷新

以上为例安装自动刷新的插件

npm install --save-dev gulp-livereload

当代码变化时可以帮助我们自动刷新页面。

// 基本使用(当less发现变化的时候自动更新页面)
var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');

gulp.task('less', function() {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'))
        .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen(); //要在这里调用listen()方法
  gulp.watch('less/*.less', ['less']);  //监听目录下的文件，若文件发生变化，则调用less任务。
});

谷歌浏览器或者火狐浏览器需要安装livereload插件