gulp.js 是基于node.js构建的。利用nodejs流的威力
1.
安装nodejs http://www.gezila.com/tutorials/40873.html
2.
安装gulp http://www.th7.cn/system/mac/201505/104211.shtml
{sudo npm install -g gulp gulp -v以确认安装成功}
sudo npm install gulp//在项目目录下安装
3.
web项目初使用 项目根目录下 npm init {生成package.json} 在项目根目录下新建 gulpfile.js
{
var gulp=require('gulp');
gulp.task('default',function() {
console.log('hello gulp');
})
}
4.
安装gulp-uglify（样式压缩） 插件 sudo npm install --save-dev gulp-uglify (作用：压缩js文件等,--save-dev 将uglify注入到package.json中的dependencies中)
使用：在gulpfile.js总填写代码
```
var uglify=require('gulp-uglify');
gulp.task('script',function() {
gulp.src('js/*.js')//源文件 *表示所有
.pipe(uglify()) //对通道中的文件进行处理
.pipe(gulp.dest('build'));//将处理后的文件输出到文件夹 build 中
})
````
5.
jshint gulp-jshint（检查js错误）插件 安装：sudo npm install jshint gulp-jshint --save-dev
使用：var jshint=require('gulp-jshint');
gulp.task('jshint',function() {
gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
})
6.
jshint-stylish(错误样式报告)插件 安装： sudo npm install --save-dev jshint-stylish【作用 错误报告采用更容易看得懂的样式】
使用：varjshintStylish=require('jshint-stylish');
将4中最后一句改为：.pipe(jshint.reporter(jshintStylish));
或者：直接将最后一句改为.pipe(jshint.reporter('jshint-stylish'));
结果：js 文件中警告用蓝色，错误用红色。并在该js文件后给出警告和错误的数量。
7.
map-stream(自定义报告样式 属于nodejs 的包) 安装：sudo npm install --save-dev map-stream
使用：
1.自定义样式
var map=require('map-stream');
var customerReporter=map(function(file,cb) {
if(!file.jshint.success){
console.log('jshint failed in '+file.path);
file.jshint.results.forEach(function(err) {
if(err){
// console.log(err);
console.log("在 "+file.path+" 中第 "+ err.error.line+" 行,"+
"第 "+err.error.character+' 列,有'+err.error.reason+"的错误");
}
})
}
cb(null,file);
});
/*
err 对象
{ file: 'js/tableModel.js',
error:
{ id: '(error)',
raw: 'Missing semicolon.',
code: 'W033',
evidence: '}',
line: 48,
character: 2,
scope: '(main)',
a: undefined,
b: undefined,
c: undefined,
d: undefined,
reason: 'Missing semicolon.' } }
*/
2.使用自定义样式（将4中最后一句修改）
gulp.task('jshint',function() {
gulp.src('js/tableModel.js')
.pipe(jshint())
.pipe(customerReporter);
//.pipe(jshint.reporter(jshintStylish));
})；
8
src 的参数 1.*.js 匹配当前目录下的素有js文件。 2.*/*.js 匹配第一次子文件目录下的所有js,第二层使用*/*/*.js 3.**/*.js匹配所有文件夹目录下的所有js文件，包括当前文件。
9.
gulp-concat （合并文件）插件安装：sudo npm install --save-dev gulp-concat
使用：
var gulpConcat=require('gulp-concat');
gulp.task('concat',function() {
gulp.src('build/*.js')//源文件
.pipe(gulpConcat('all.js'))//对pipe中的文件进行合并
.pipe(gulp.dest('jsmin'));//输出到指定目录
});
10.
clean task (清除一个目录下的所有文件）
使用：
gulp.task('clean',function() {
return del('build/*.js');
});
11.
gulp-imagemin （图片压缩插件）安装：sudo npm install --save-dev gulp-imagemin
使用：
var imagemim=require('gulp-imagemin');
gulp.task('imgmin',function() {
gulp.src('pic/*')
.pipe(imagemim())
.pipe(gulp.dest('pic-min'));
});
12
gulp-clean-css(将css压缩为企业文件) 安装：npm install gulp-clean-css --save-dev
使用：var cssclean=require('gulp-clean-css');
gulp.task('cssClean',function() {
gulp.src('css/*')
.pipe(cssclean({compatibility:'ie8'}))
.pipe(gulp.dest('build'))
});
clean-css 参数
var gulp=require('gulp'),
cssmin=require('gulp-minify-css');
gulp.task('testCssmin',function(){
gulp.src('src/css/*.css')
.pipe(cssmin({
advanced:false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility:'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks:true,//类型：Boolean 默认：false [是否保留换行]
keepSpecialComments:'*'
//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
}))
.pipe(gulp.dest('dist/css'));
});
13
gulp-csslint(检查css 错误) 安装：sudo npm install --save-dev gulp-csslint
使用：var csslint=require('gulp-csslint');
gulp.task('cssLint',function() {
gulp.src('css/*.css')
.pipe(csslint())
.pipe(csslint.formatter());
});
14.
csslint-stylish（css 检查报告样式）安装：sudo npm install --save-dev csslint-stylish
使用：{修改13}
var csslint=require('gulp-csslint');
csslint.addFormatter('csslint-stylish');
gulp.task('cssLint',function() {
gulp.src('css/*.css')
.pipe(csslint())
.pipe(csslint.formatter('stylish'))
//.pipe(csslint.formatter());
});
结果：不同错误显示不同颜色
15.
自定义css样式报告
16.
gulp-rename （重命名）插件 安装：npm install --save-dev gulp-rename
使用
varrename=require("gulp-rename");
//rename via string
gulp.src("./src/main/text/hello.txt")
.pipe(rename("main/text/ciao/goodbye.md"))
.pipe(gulp.dest("./dist"));//./dist/main/text/ciao/goodbye.md
//rename via function
gulp.src("./src/**/hello.txt")
.pipe(rename(function(path){
path.dirname+="/ciao";
path.basename+="-goodbye";
path.extname=".md"
}))
.pipe(gulp.dest("./dist"));//./dist/main/text/ciao/hello-goodbye.md
//rename via hash
gulp.src("./src/main/text/hello.txt",{base:process.cwd()})
.pipe(rename({
dirname:"main/text/ciao",
basename:"aloha",
prefix:"bonjour-",
suffix:"-hola",
extname:".md"
}))
.pipe(gulp.dest("./dist"));
17.
gulp-htmlmin （html 压缩） 安装 ：npm install --save-dev gulp-htmlmin
使用：
var htmlmin=require('gulp-htmlmin');
gulp.task('htmlMin',function() {
gulp.src('index.html')
.pipe(htmlmin({collapseWhitespace:true}))
.pipe(gulp.dest('html.min'));
});
17.
gulp-sourcemaps 安装 npm install --save-dev gulp-sourcemaps
使用：
