gulp自动化构建项目过程
1.css压缩 gulp-clean-css
2.js压缩 gulp-uglify
3.js合并 gulp-concat
gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件;异步任务支持；
压缩 js 代码可降低 js 文件大小，提高页面打开速度;gulp通过代码指令即可压缩
gulp是基于nodejs的自动任务运行器，
她能自动地完成 文件的测试，检查，合并，压缩，格式化，浏览器自动刷新，部署文件生成，并监听文件在改动后重复指定的这些步骤
安装完node以后，npm自动安装成功；
npm init初始化一个package.json文件
mkdir testgulp
cd testgulp
npm install -g gulp//全局安装gulp，-g表示在全局环境安装，以便任何项目都能使用它
npm install —-save-dev gulp //—-save-dev 来更新package.json文件,
更新 devDependencies 值，以表明项目需要依赖gulp。
Dependencies 可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依赖关系
创建gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify'); (获取 uglify 模块（用于压缩 JS))
.pipe(uglify()) (压缩 js 文件)
gulp.task('script', function() { =======================(创建压缩任务)
gulp.src('js/myapp.js')// 1. 找到目标压缩文件位置
.pipe(uglify()) // 2. 压缩文件
.pipe(gulp.dest('dist/js/myjavascript')) // 3. 另存压缩后的文件，如果该文件夹不存在，将会自动创建它，执行gulp script命令后将可在根目录下看到dist／js/myjavascript文件夹并且有压缩后的myapp.js
});
在命令行使用gulp script启动此任务
关于gulpfile.js用法的注释
1.gulp.task(taskname, function(){taskContent})
2.gulp.src(filepath)
3.gulp.dest(filepath)
4.gulp.pipe() //管道,pipe可理解为将操作加入执行队列
5.gulp的watch用法(监视文件，并且可以在文件发生改动时候做一些事情)
------eg:gulp.watch('js/myapp.js',['script'])//监测myapp.js，譬如改动就执行任务script
注意：gulp.src('js/＊.js') --------- (*表示所有的意思，这样一来就可以同时压缩多个js文件)
6.gulp的task（auto）功能 -----------(在命令行输入 gulp auto，自动监听 js/*.js 文件的修改后压缩js)
--------eg: gulp.task('auto',function(){
gulp.watch('js/myapp.js',['script'])
})
7.使用 gulp.task('default', fn) 定义默认任务
gulp.task('default', ['script', 'auto']);
8.gulp task之runSequence
--------任务的顺序用runSequence来组织，把可以并行的的任务放在一个数组里面， 数组之间是串行的
runSequence = require('run-sequence')
runSequence(['clean'], ['copy-to-one-folder'], ['publish'], callback);
(备注： 加形参callback彻底变成串行)
关于task(任务)之间的相互依赖
定义一个所依赖的 task 必须在这个 task 执行之前完成
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('script', function() {
gulp.src('js/myapp.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js/myjavascript'))
});
gulp.task('config',function(){
gulp.src('config.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
gulp.task('auto',function(){
gulp.watch('js/myapp.js',['script'])
})
gulp.task('default',['script','auto'])
gulpfile 的 task 依赖树
//gulp-rename 然后 pipe 到 dest 两次来实现
var gulp = require('gulp');
var rename=require('gulp-rename');
var DEST="build/";
var uglify = require('gulp-uglify');
gulp.task('script', function() {
gulp.src('js/myapp.js')
.pipe(gulp.dest(DEST))
.pipe(uglify())
.pipe(rename({extname:'.min.js'}))
.pipe(gulp.dest(DEST))
});
使用Gulp实现自动监测页面刷新
Gulp-connect;通过watch任务和livereload设置实现自动刷新的：npm install -g gulp-connect
// 实时更新浏览器界面
gulp.task('watch', function () {
gulp.watch(['views/main.html'], ['html']);
});
//使用connect启动一个Web服务器
var
livereload = require('gulp-livereload'),
connect = require('gulp-connect');
gulp.task('connect', function () {
connect.server({
livereload: true
});
});
gulp.task('html', function () {
gulp.src('views/main.html')
.pipe(connect.reload());
});
gulp.task('auto',function(){
gulp.watch('js/*/*.js',['script']);
gulp.watch(['views/main.html'], ['html']);
gulp.watch('css/*.css',['css'])
})
gulp.task('default',['webserver','connect','auto','script','css'])
var gulp = require('gulp'),
livereload = require('gulp-livereload'),
gulp.task('watch', function () {
livereload.listen();
gulp.watch(['src/main/webapp/ejtapp/**/*.*'],function(event){
livereload.changed(event.path);
});
});
使用Gulp实现执行gulp命令即自动加载打开页面
var webserver = require('gulp-webserver'),
//需要执行npm install gulp-webserver命令
gulp.task('webserver', function() {
gulp.src( '.' ) // 服务器目录（.代表根目录）
.pipe(webserver({ // 运行gulp-webserver
livereload: true, // 启用LiveReload
open: true // 服务器启动时自动打开网页
}));
});
把需要发布的从多处汇总到一个目录dist/src
把需要发布的从多处汇总到一个目录dist/src
gulp.task("copy-to-one-folder", function(){
gulp.src(["c:/labs3/TestLab/NodeServer/routes/**/*"], {base: "c:/labs3/TestLab/"})
.pipe(gulp.dest('dist/src'));
return gulp.src(["c:/labs3/TestLab/HomeFinder/**/*"], {base:"c:/labs3/TestLab/HomeFinder/"})
.pipe(gulp.dest('dist/src'));
});
关于gulp如何将本地项目自动打包部署至远程服务器
var gulp = require('gulp'),
sftp=require('gulp-sftp'),//gulp自动远程上传至服务器
gulp.task('autosftp',function(){
return gulp.src('release/**')
.pipe(sftp({
host:'182.92.102.97',
port:'9393',
remotePath:'./testejtfront',
user:'root',
password:'Zxxydy123'
}))
})
gulp.task('default',['webserver','jshint','copy-to-one-folder','test','publish','connect','auto','script','autosftp'])
参考链接：http://wiki.jikexueyuan.com/project/gulp-book/
http://www.gulpjs.com.cn/docs/
http://www.tuicool.com/articles/nAzquyE