Gulp自动构建前端开发一体化

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

1、首先你要装上nodejs环境；
http://nodejs.org；

在命令行输入node -v 

回车（Enter），如果安装正确，你会看到n
ode的版本号；

在命令行输入npm -v 

如果正确，你可以看到npm的版本号；

如果错误，请重试；

2、npm介绍

（1）npm安装插件

 npm install [-g] [--save-dev]

（2）npm卸载插件

 npm uninstall [-g] [--save-dev]

（3）npm更新插件

 npm update [-g] [--save-dev]（不加name就是更新所有的插件）
 npm help、 npm list

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常。可以使用淘宝镜像安装

注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；npm install cnpm -g --registry=https://registry.npm.taobao.org

3、全局安装gulp
cnpm install gulp -g
回车（Enter）
在输入：gulp -v
如果看到版本号，说明安装正确；

4、配置package.json文件

{
"name": "test",//项目名称（必须）
"version": "1.0.0",////项目版本（必须）
"description": "This is for study gulp project !",//项目描述（必须）
"homepage": "",//项目主页
"repository": {//项目资源库
"type": "",
"url": ""//地址
},
"author": {
"name": "xyphf",//作者
"email": "2766588380@qq.com"//邮箱
},
"license": "ISC", //项目许可协议
"devDependencies": {//项目依赖的插件
"gulp": "^3.8.11",
"gulp-concat": "^2.6.0",//文件合并
"gulp-cssmin": "^0.1.7",//css压缩
"gulp-imagemin": "^3.1.1",//图片压缩
"gulp-jshint": "^2.0.2",//js检查
"gulp-rename": "^1.2.2",//重新命名
"gulp-uglify": "^2.0.0",//js压缩
"jshint": "^2.9.4"
}
}

　　　

注意：json文件内是不能写注释的，复制下列内容请务必删除注释；
你可以将这个package.json复制下去，直接执行
npm install

5、本地安装gulp插件

cd定位项目目录 npm install --save-dev

PS：细心的你可能会发现，我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

6、本地安装gulp插件
前端项目需要的功能：
（1）图片（压缩图片支持jpg、png、gif）
（2）样式 （支持sass 同时支持合并、压缩、重命名）
（3）javascript （检查、合并、压缩、重命名）
（4）html （压缩）
（5）客户端同步刷新显示修改
（6）构建项目前清除发布环境下的文件（保持发布环境的清洁）

通过gulp plugins，寻找对于的gulp组件

gulp-imagemin: 压缩图片
gulp-ruby-sass: 支持sass
gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-htmlmin: 压缩html
gulp-clean: 清空文件夹
gulp-livereload: 服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）

npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

　　

7、新建新建gulpfile.js文件（重要）

gulp有五个方法：src、dest、task、run、watch
src和dest：指定源文件和处理后文件的路径
watch：用来监听文件的变化
task：指定任务
run：执行任务
var gulp = require('gulp'), //基础库
htmlmin = require('gulp-htmlmin'),//html文件压缩
css = require('gulp-minify-css'),//用于压缩CSS
less = require('gulp-less'),//解析less文件
imagemin = require('gulp-imagemin'),//图片压缩
jshint = require('gulp-jshint'), //js检查
uglify = require('gulp-uglify'), //js压缩
rename = require('gulp-rename'), //重命名
concat = require('gulp-concat'), //文件合并
clean = require('gulp-clean'), //清空文件夹
tinylr = require('tiny-lr') //liveload
rev = require('gulp-rev'),//版本号
server = tinylr(),
port = 35729,
liveload = require('gulp-liveload');//liveload

// HTML处理
gulp.task('html', function() {
var htmlSrc = './src/*.html',
htmlDst = './dist/';

gulp.src(htmlSrc)
.pipe(livereload(server))
.pipe(gulp.dest(htmlDst))
});

// 样式处理
gulp.task('css', function () {
var cssSrc = './src/scss/*.scss',
cssDst = './dist/css';

gulp.src(cssSrc)
.pipe(sass({ style: 'expanded'}))
.pipe(gulp.dest(cssDst))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(livereload(server))
.pipe(gulp.dest(cssDst));
});

// 图片处理
gulp.task('images', function(){
var imgSrc = './src/images/**/*',
imgDst = './dist/images';
gulp.src(imgSrc)
.pipe(imagemin())
.pipe(livereload(server))
.pipe(gulp.dest(imgDst));
})

// js处理
gulp.task('js', function () {
var jsSrc = './src/js/*.js',
jsDst ='./dist/js';

gulp.src(jsSrc)
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest(jsDst))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(livereload(server))
.pipe(gulp.dest(jsDst));
});

// 清空图片、样式、js
gulp.task('clean', function() {
gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
.pipe(clean());
});

// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function(){
gulp.start('html','css','images','js');
});

// 改版本号
gulp.task('rev',function(){
gulp.src(['./src/*.json','./src/*.html'])
.pipe(revCollector({
replaceReved:true
}))
.pipe(gulp.dest('dist/'))
});

// 监听任务 运行语句 gulp watch
gulp.task('watch',function(){

server.listen(port, function(err){
if (err) {
return console.log(err);
}

// 监听html
gulp.watch('./src/*.html', function(event){
gulp.run('html');
})

// 监听css
gulp.watch('./src/scss/*.scss', function(){
gulp.run('css');
});

// 监听images
gulp.watch('./src/images/**/*', function(){
gulp.run('images');
});

// 监听js
gulp.watch('./src/js/*.js', function(){
gulp.run('js');
});

});
});

8、运行gulp
gulp 任务名称
当执行gulp default或gulp将会调用default任务里的所有任务

9.LiveReload配置
1、安装Chrome LiveReload
2、通过npm安装http-server ，快速建立http服务
npm install http-server -g
3、通过cd找到发布环境目录dist
4、运行http-server，默认端口是8080
5、访问路径localhost:8080
6、再打开一个cmd，通过cd找到项目路径执行gulp，清空发布环境并初始化
7、执行监控 gulp
8、点击chrome上的LiveReload插件，空心变成实心即关联上，你可以修改css、js、html即时会显示到页面中。

gulp常用地址

gulp官方网址：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 中文API：http://www.ydcss.com/archives/424