gulp 总结

gulp

单个输出

var gulp = requrie('gulp')
var coffee = requrie('gulp-coffee')
var uglify = requrie('gulp-uglify')

gulp.task('js,function(){
	return gulp.src('路径')
		.pipe(coffee())
		.pipe(uglify())
		.pipe(gulp.dest('路径')
})
gulp.task('watch',function(){
	gulp.watch('路径',['路径'])
})

多个输出

var gulp = requrie('gulp')
var autoprefixer = requrie('gulp-autoprefixer')//自动补全浏览器兼容的css
var minifyCss = requrie('gulp-minify-css')
var rename = requrie('gulp-rename')

gulp.task('css',function(){
	return gulp.src('路径')
			.pipe(autoprefixer('last 2 versions'))
			.pipe(gulp.dest('路径'))
			.pipe(minifyCss())
			.pipe(rename({extname:'min.css'}))
			.pipe(gulp.dest('路径'))
})

只对修改过的文件执行

var gulp = requrie('gulp')
var changed = requrie('gulp-changed')
var uglify = requrie('gulp-uglify')

gulp.task('css',function(){
	return gulp.src('路径')
			.pipe(changed('路径'))
			.pipe(uglify())
			.pipe(gulp.dest('路径'))
})

一个例子 gulpfile.js

var gulp = requrie('gulp')
// gulp 插件
var uglify = requrie('gulp-uglify')
var rename = requrie('gulp-rename')
var watch = requrie('gulp-watch')
var jshint = requrie('gulp-jshint')
var minifyCss = requrie('gulp-minify-css')
var notify = requrie('gulp-notify')
var concat = requrie('gulp-concat')
var useref = requrie('gulp-useref')
var filter = requrie('gulp-filter')
var gulpif = requrie('gulp-gulpif')
var clean = requrie('gulp-clean')
//压缩
gulp.task('index.html',function(){
	var assets = useref.assets()
	return gulp.src('app/index.html')
			.pipe(assets)
			.pipe(gulpif('*.js',uglify()))
			.pipe(gulpif('*css',minifyCss()))
			.pipe(assets.restore())
			.pipe(useref())
			.pipe(gulp.dest('www'))
})
//检查语法
gulp.task('jshint',function(){
	return gulp.src('app/js/*.js')
			.pipe(jshint())
			.pipe(jshint.reporter('default'))
})
//复制文件
gulp.task('copy',function(){
	gulp.src('app/fonts/*')
		.pipe(gulp.dest('www/fonts/')
	gulp.src('app/templates/**')
		.pipe(gulp.dest('www/templates/'))
	gulp.src('app/img/*')
		.pipe(gulp.dest('www/img')
})
// 清空图片、样式、js
gulp.task('clean', function () {
    return gulp.src(['www/css/*', 'www/js/*', 'www/img/*', 'www/lib/*', 'www/templates/*'], {read: false})
        .pipe(clean({force: true}))
})
// 注册缺省任务
gulp.task('default', ['jshint', 'clean', 'index', 'copy'])

一些匹配规则 在gulp.src使用

• 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js

. 能匹配 a.js,style.css,a.b,x.y

//*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js

** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件

*/.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js

a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z

a/b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单单独出现才能匹配多级目录

?.js 能匹配 a.js,b.js,c.js

a?? 能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符

[xyz].js 只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符

[^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

//使用数组的方式来匹配多种文件
gulp.src(['js/*.js','css/*.css','*.html'])

//匹配所有js文件，但排除掉以b开头的js文件
gulp.src([*.js,'!b*.js']) 
//不会排除任何文件，因为排除模式不能出现在数组的第一个元素中
gulp.src(['!b*.js',*.js])

gulp.task(任务名,[依赖],fn)

任务名自己命名
依赖是执行这个task前需要其他的任务执行完才执行

gulp.watch('匹配文件'，['xxtask','xxtask'])

监控的文件变化后，来执行数组中的各种task

常用的 gulp插件

gulp-load-plugins 在gulpfile.js 中使用 gulp-load-plugins 可以帮助我们自动加载 package里的gulp插件，是用到哪个插件才去加载的 原始的插件名变成 plugins.xxx 如：gulp-rename =》 plugins.rename

var gulp = requrie('gulp')
//要马上执行
var plugins = requrie('gulp-load-plugins')()

gulp-rename 重命名

.pipe(rename('xxx'))

gulp-uglify js文件压缩

.pipe(uglify())

gulp-minify-css css压缩

.pipe(minifyCss())

gulp-minify-html html文件压缩

.pipe(minifyHtml())

gulp-jshint js代码检查

.pipe(jshint())

gulp-concat 文件合并

.pipe(concat('all.js'))  // 合并匹配到的js文件 并命名为 "all.js"

gulp-less gulp-sass

.pipe(less())
.pipe(sass())

gulp-imagemin 图片压缩

 .pipe(imagemin({progressive: true,use: [pngquant()] //使用pngquant来压缩png图片
}))

gulp-livereload 自动刷新

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

gulp.task('watch', function() {
	livereload.listen(); //要在这里调用listen()方法
	gulp.watch('less/*.less', ['less'])
})

gulp-autoprefixer 自动补全浏览器兼容的css

gulp-nodemon 自动启动/重启你的node程序

gulp-clean

gulp-ruby-sass 是另外一款sass的gulp插件， 比glup-sass慢，但是更稳定，功能更多

gulp-bower 执行bower的包安装

var gulp = require('gulp')
var bower = require('gulp-bower')
gulp.task('bower', function() {
  return bower()
    .pipe(gulp.dest('lib/'))
})

gulp-handlebars 编译handlebars文件

var handlebars = require('gulp-handlebars')
var wrap = require('gulp-wrap')
var declare = require('gulp-declare')
var concat = require('gulp-concat')
gulp.task('templates', function(){
  gulp.src('source/templates/*.hbs')
    .pipe(handlebars())
    .pipe(wrap('Handlebars.template(<%= contents %>)'))
    .pipe(declare({
      namespace: 'MyApp.templates',
      noRedeclare: true, // Avoid duplicate declarations
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('build/js/'))
})

gulp-jslint js的代码检测

var gulp = require('gulp')
var jslint = require('gulp-jslint')
gulp.task('default', function () {
    return gulp.src(['source.js'])
        .pipe(jslint({
            node: true,
            evil: true,
            nomen: true,
            global: [],
            predef: [],
            reporter: 'default',
            errorsOnly: false
        }))
        .on('error', function (error) {
            console.error(String(error));
        })
})