gulp新手入门
gulp的简介
什么是gulp
gulp是在你的开发过程中用来帮你自动化一些麻烦耗时的工作的工具集。比如在web开发过程中，它能帮你完成css预处理，js文件整合，压缩，实时重加载等等。并且它还和目前市场上主流的IDE整合，无论是在PHP,.NET,Node.js,Java等等开发者都很喜欢用它。拥有超过1700中插件，gulp能够让你从繁琐的构建系统中解脱出来，真正的开始干活。
怎样开始
安装Node.js
创建一个项目，比如说gulptest
在控制台项目路径下，npm init，跟着步骤创建package.json文件
npm install --global gulp，使gulp命令可以在命令行中使用。
npm install --save-dev gulp，在项目上安装gulp模块，同时将 gulp添加到package.json的dev-dependencies依赖中。
比如我们需要压缩css文件，先安装需要的模块npm install --save-dev gulp-minify-css
在项目路径下创建gulpfile.js
var gulp = require('gulp'); var minifyCss = require('gulp-minify-css'); gulp.task('minify-css', function() { return gulp.src('styles/*.css') .pipe(minifyCss({compatibility: 'ie8'})) .pipe(gulp.dest('dist')); });运行gulp minify-css命令
gulp API
Emits files matching provided glob or an array of globs. Returns a stream of Vinyl files that can be piped to plugins.
gulp.src('client/templates/*.jade') .pipe(jade()) .pipe(minify()) .pipe(gulp.dest('build/minified_templates'));根据路径找到文件然后把它放在流里面pipe到gulp插件
gulp.src('client/js/**/*.js') // Matches 'client/js/somedir/somefile.js' and resolves `base` to `client/js/` .pipe(minify()) .pipe(gulp.dest('build')); // Writes 'build/somedir/somefile.js' gulp.src('client/js/**/*.js', { base: 'client' }) .pipe(minify()) .pipe(gulp.dest('build')); // Writes 'build/js/somedir/somefile.js'Can be piped to and it will write files. Re-emits all data passed to it so you can pipe to multiple folders. Folders that don't exist will be created.
gulp.src('./client/templates/*.jade') .pipe(jade()) .pipe(gulp.dest('./build/templates')) .pipe(minify()) .pipe(gulp.dest('./build/minified_templates'));Define a task using Orchestrator.
gulp.task('somename', function() { // Do stuff });An array of tasks to be executed and completed before your task will run.
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { // Do stuff });You can also omit the function if you only want to run the dependency tasks:
gulp.task('build', ['array', 'of', 'task', 'names']);Accept a callback
// run a command in a shell var exec = require('child_process').exec; gulp.task('jekyll', function(cb) { // build Jekyll exec('jekyll build', function(err) { if (err) return cb(err); // return error cb(); // finished task }); });Return a stream
gulp.task('somename', function() { var stream = gulp.src('client/**/*.js') .pipe(minify()) .pipe(gulp.dest('build')); return stream; });Return a promise
var Q = require('q'); gulp.task('somename', function() { var deferred = Q.defer(); // do async stuff setTimeout(function() { deferred.resolve(); }, 1); return deferred.promise; });默认情况下task中的任务是同步进行的，所以，如果需要在保证某一项任务在其他之前可以按照如下操作：
var gulp = require('gulp'); // takes in a callback so the engine knows when it'll be done gulp.task('one', function(cb) { // do stuff -- async or otherwise cb(err); // if err is not null and not undefined, the run will stop, and note that it failed }); // identifies a dependent task must be complete before this one begins gulp.task('two', ['one'], function() { // task 'one' is done now }); gulp.task('default', ['one', 'two']);Watch files and do something when a file changes. This always returns an EventEmitter that emits change events.
Names of task(s) to run when a file changes, added with gulp.task()
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']); watcher.on('change', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });
常用的gulp plugins
编译Sass gulp-ruby-sass
自动添加前缀 gulp-autoprefixer
压缩CSS gulp-minify-css
JSHint gulp-jshint
Concatenation gulp-concat
Uglify gulp-uglify
图片压缩 gulp-imagemin
实时重加载 gulp-livereload
图片缓存从而只压缩改变的图片 gulp-cache
Notify of changes gulp-notify
清除文件干净地构建 del
参考链接：
github-gulp
gulp-documentation