1：如何安装？
$ npm install -g gulp // 全局安装
$ npm install --save-dev gulp //开发依赖安装
$ touch gulpfile.js // 创建配置文件
$ gulp // 运行
2：gulpfile.js有什么用？
每个工具都有自己的配置文件，gulp的配置文件就叫gulpfile.js。
如：
var gulp = require('gulp'); // 引入gulp工具
gulp.task('text',function(){
console.log('hello world');
});
以上建立了一个叫text任务，只要在命令行输入$ gulp text,这个任务就会执行。
var concat = require('gulp-xxx'); // css合并插件
var minifycss = require('gulp-xxx'); // css压缩插件
gulp.task('css',function(aryument) {
gulp.src('src/css/*css')
.pipe(concat('merge.min.css'))
.pipe(minifycss())
.pipe(gulp.dest('dist/css/'));
});
以上创建一个合并压缩css的任务，在命令行输入$ gulp css,这个任务就会执行。
gulp.task(''default'',['css','js','img']); // [] 里的是任务名
这种写法只需在命令行输入gulp，就会自动执行所有任务。
3：gulp有哪些API？
gulp.src(globs[, options])
获取需要操作的文件。
第一参数globs
gulp.src('client/templates/*.jade') // 获取templates文件夹下所有后缀为.jade的文件
gulp.src(['client/templates/1.jade',client/templates/2.jade]) // 也可以是个数组
第二个是可选参数options，用于一些额外的设置。
gulp.dest(path[, options])
写文件，并且重新输出所有数据。
gulp.src('script/jquery.js')
.pipe(gulp.dest('dist/foo.js'));
//最终生成的文件路径为 dist/foo.js/jquery.js,而不是dist/foo.js
要想改变文件名，可以使用插件gulp-rename
gulp.task(name[, deps], fn)
该方法创建一个任务
gulp.task('somename', function() {
// 做一些事
});
name 任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
// 做一些事
});
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。
gulp.watch(glob[, opts], tasks)
用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。
gulp.watch('js/**/*.js', ['uglify','reload']);
glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
optsopts 为一个可选的配置对象，通常不需要用到
tasks 需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字.
gulp.watch(glob[, opts, cb])
另一种用法。
cb 参数为一个函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息，type属性为变化的类型，可以是added,changed,deleted；path属性为发生变化的文件的路径。
gulp.watch('js/**/*.js', function(event){
console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变
console.log(event.path); //变化的文件的路径
});
4：gulp有哪些常用的插件
gulp-rename 重命名
gulp-uglify js压缩
gulp-minify-css css压缩
gulp-concat 合并
gulp-less less编译
gulp-sass sass编译
gulp-imagemin 压缩jpg、png、gif等图片
gulp-livereload 当代码变化时，它可以帮我们自动刷新页面
网友评论