概念图：
gulp
gulp
首先先放上三个问题：
什么是gulp？
为什么是gulp，而不是grunt？
怎么使用gulp？
现在来一一解答上面的问题：
什么是gulp：
gulp简介：
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
简而言之，在工作中，gulp能解决很多需要我们手动处理的操作，像代码的合并、压缩、编译、自动补全等等；
为什么是gulp而不是其他：
gulp和grunt异同点：
易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。
高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。
高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。
易于学习：通过把API降到最少（4个），你能在很短的时间内学会Gulp。
- grunt:
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'dist/assets/css/main.css': 'src/styles/main.scss',
}
}
},
autoprefixer: {
dist: {
options: {
browsers: [
'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
]
},
src: 'dist/assets/css/main.css',
dest: 'dist/assets/css/main.css'
}
},
grunt.registerTask('styles', ['sass', 'autoprefixer']);
grunt首先对sass样式文件进行了编译 --> 输出，其次再进行自动补全 --> 输出，最后覆盖css文件。
- gulp：
gulp.task('sass', function() {
gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'compressed' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'));
});
gulp引入sass文件，执行编译，其次执行自动补全，最后输出；
** 相比较而言，grunt对特定的任务处理起来相对较凌乱，而且处理的过程中还会产生碎片文件（上例中最后一步覆盖操作）。而gulp处理任务时是one by one，贯彻流的概念在其中，相对逻辑清晰易懂。想必你也大致了解了他们的异同，快来一同进入gulp的世界吧。**
怎么使用gulp：
首先你必须对nodejs中的npm包管理工具有一定的了解，教程可参考链接的1~4小节 >> gulp详细入门教程
- 确保安装好nodejs后，打开终端（快捷键
win+r--> 键入命令cmd并回车），键入如下命令，在全局安装gulp:
npm install gulp -g
- 接着通过cd定位到项目文件夹根目录（以下操作都基于此目录进行），再键入如下命令，创建packge.json文件：
npm init
packge.json文件实例（* 注意：json文件内是不能写注释的，复制下列内容请删除注释 *）：
{
"name": "test", //项目名称（必须）
"version": "1.0.0", //项目版本（必须）
"description": "This is for study gulp project !", //项目描述（必须）
"main": "gulpfile.js", //配置文件
"devDependencies": { //项目依赖的插件
"gulp-cache": "^0.4.3",
"gulp-imagemin": "^2.4.0",
"gulp-plumber": "^1.1.0"
},
"repository": { //项目资源库
"type": "git",
"url": "https://git.oschina.net/xxxx"
},
"author": { //项目作者信息
"name": "surging",
"email": "surging2@qq.com"
},
"license": "ISC" //项目许可协议
}
- 安装gulp：
npm install gulp -S
- 安装插件（gulp插件）：
安装之前先对常用插件做个介绍：
- gulp-less：less编译；
- gulp-imagemin：压缩图片（包括PNG、JPEG、GIF和SVG图片）；
- gulp-cache:压缩图片时比较耗时，在很多情况下我们只修改了某些图片，没有必要压缩所有图片，使用”gulp-cache”只压缩修改的图片，没有修改的图片直接从缓存文件读取;
- gulp-plumber:编译出现异常不退出监听；
- gulp-sourcemaps:该插件能更容易的找到对应的less文件；
- gulp-notify:捕获错误，返回错误信息；
- gulp-autoprefixer：自动补全浏览器前缀；
- gulp-clean-css：压缩css文件
- gulp-make-css-url-version：给css文件url地址添加版本号；
- gulp-rev-append：给页面的引用添加版本号，清楚页面引用缓存；
- gulp-uglify：压缩js文件；
- gulp-concat：合并javascript文件，减少网络请求；
- gulp-rename：重命名文件；
- del：清除文件；
开始安装插件，键入以下命令：
npm install gulp-less -S
5.新建gulpfile.js文件：
//获取对应模块；
var gulp = require('gulp'),
notify = require('gulp-less');
//创建less任务
gulp.task('less', function(){
//要处理的less文件路径
gulp.src('src/less/*.less')
//编译less
.pipe(less())
//输出
.pipe(gulp.dest(['dist/css', 'src/css']))
});
gulp.task('auto', function(){
//监听less文件，当发生改动时，启动less任务
gulp.watch('src/less/*.less', ['less']);
}
gulp.task('default', ['less', 'auto']);
6.定位到当前项目运行gulp，，键入如下命令：
gulp
7.完整gulpfilejs配置文件：
var gulp = require('gulp'),
imgMin = require('gulp-imagemin'),
cache = require('gulp-cache'),
notify = require('gulp-notify'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
pngquant = require('imagemin-pngquant'),
uglify = require('gulp-uglify'),
styles = require('gulp-less'),
autoprefixer = require('gulp-autoprefixer'),
cssMin = require('gulp-clean-css'),
cssver = require('gulp-make-css-url-version'),
concat = require('gulp-concat'),
del = require('del');
gulp.task('imgMin', function(){
gulp.src('src/img/*.{jpg,png,gif,ico}')
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(cache(imgMin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/img'));
});
gulp.task('jsMin', function(){
gulp.src(['src/libs/*.js', 'src/js/*.js'])
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(concat('index.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify({
mangle: {except: ['require', 'exports', 'module', 'touch', '$']}
}))
.pipe(gulp.dest('dist/js'));
});
gulp.task('styles', function(){
gulp.src('src/less/*.less')
.pipe(styles())
.pipe(autoprefixer({browsers:['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'Android >=4.0']}))
.pipe(gulp.dest('src/css'));
});
gulp.task('cssMin', ['styles'], function(){
gulp.src(['src/css/*.css', 'src/libs/*.css'])
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(concat('index.css'))
.pipe(rename({suffix: '.min'}))
.pipe(cssver())
.pipe(cssMin({
advanced: true,
compatdsibility: 'ie8',
keepBreaks: false
}))
.pipe(gulp.dest('dist/css'));
});
gulp.task('watchFile', function(){
gulp.watch('src/img/*.{jpg,png,gif,ico}', ['imgMin']);
gulp.watch('src/**/*.js', ['jsMin']);
gulp.watch('src/**/*.less', ['styles']);
gulp.watch('src/**/*.css', ['cssMin']);
});
gulp.task('del', function(cb){
del(['dist/css/', 'dist/img', 'dist/js'],cb);
});
gulp.task('default', ['del', 'imgMin', 'jsMin', 'cssMin', 'watchFile']);
