gulp 常用命令操作集合
gulp 作为 grunt之后的打包压缩工具，以其配置简洁而备受青睐。在最近的一个项目里面我有幸使用gulp来编译压缩上线代码。
下面来一起了解gulp的基本命令，极其用法。
gulp里面基本就是以任务（task）的形式完成每一步的操作。gulp 与 grunt 主要的区别在于 。grunt 是基于文件的，而gulp是基于pipe. 在gulp里面定义一个任务很简单。
例如：
下面是校验css的任务。假如需要执行这个任务的时候，只需要打开控制台，进入项目目录。然后执行命令： gulp css 。gulp就好将 指定的目录下的css文件编译,压缩。并生成到指定的目录。
/**
* [css 校验]
* cmd ： gulp css
* author : jin
*/
gulp.task('css', function () {
return gulp.src([root.src+'/**/*.css'])
.pipe(autoprefixer({
browsers: ['last 2 versions', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'],
cascade: true, //是否美化属性值 默认：true 像这样：
//-webkit-transform: rotate(45deg);
//transform: rotate(45deg);
remove:true //是否去掉不必要的前缀 默认：true
}))//自动添加前缀
.pipe(minifycss())
.pipe(changed(root.dist))
.pipe(gulp.dest(root.dist))
.pipe(sourcemaps.write('./'))//map文件位置
.pipe(gulp.dest(root.dist))
.pipe(reload({stream: true})); //时时刷新
// 全局定义：var reload = browserSync.reload;
});
基本用法
gulp最基本的用法主要有：预处理文件编译压缩(如：sass),js文件压缩,image图片压缩，本地时时刷新服务等。 gulp常用插件有以下几种：
var gulp = require('gulp'), //gulp
jshint = require('gulp-jshint'),//js校验
uglify = require('gulp-uglify'),//压缩
concat = require('gulp-concat'),//文件合并
sass = require('gulp-sass'),//sass文件编译
sourcemaps = require('gulp-sourcemaps'),//生成.map文件
imagemin = require('gulp-imagemin'),//图片压缩
pngquant = require('imagemin-pngquant'),//图片压缩
replace = require('gulp-replace-task'),//内容替换
changed = require('gulp-changed'),//检测文件内容是否发生变化
autoprefixer = require('gulp-autoprefixer'),//css自动加前缀
minifycss = require('gulp-minify-css'),//css压缩
includer = require('gulp-html-ssi'),//ssi用法 文件可以使用include引入.服务器语法
browserSync = require('browser-sync');//时时刷新,与 supervisor一起使用效果更好
css压缩上面已经举例，下面就不重新复述了.不过注意sass插件安装喜欢报错，需要注意。需要使用sass编译只需要在css任务前面添加以下代码即可。
.pipe(sass().on('error', sass.logError))
1. js编译压缩
压缩主要注意 seajs 等模块管理框架的保留变量不要被压缩，以免产生错误。这次的项目里面就在使用seajs的时候由于没有注意而造成模块引用的时候报错。
/**
* 压缩JS
* cmd : gulp jsminify
* author : jin
*/
gulp.task('jsminify' , function(){
return gulp.src([root.src+'/**/*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify({
mangle: { //seajs等库文件对 以下这几个变量有要求，不能压缩
except: ['define', 'require', 'module', 'exports', 'modules']
}
,compress: false
}))
.pipe(changed(root.dist))
.pipe(gulp.dest(root.dist))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(root.dist))
.pipe(reload({stream: true}));
});
2.图片压缩
/**
* 图片压缩
* cmd : gulp imagemin
* author : jin
*/
gulp.task('imagemin', function(){
return gulp.src([root.src+'/**/images/**/*.*'])
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(root.dist))
.pipe(reload({stream: true}));
});
3.时时刷新
时时刷新功能可以在写代码的时候可以时时查看效果。
/**
* 本地时时刷新服务
* cmd : gulp server
* author:jin
* 与 supervisor --watch routes,views ./bin/www 效果更好
*/
gulp.task('server' , ['dist'] , function(){
browserSync.init(root.dist+'/**/*.*' , {
server : { baseDir : root.dist} //本地目录
// proxy : root.host //选择代理 , 因为可能需要调用nodejs的模拟接口
});
// 监听开发目录的文件变化 ,随时将变化的文件发送到dist测试目录
gulp.watch(root.src+'/**/*.*',['dist']);
//监听服务器文件变化
gulp.watch('routes/**/*.js').on('change' , reload);
});
这里存在依赖的任务就是 dist。task任务的第二个参数为当前任务需要依赖的任务。必须等到依赖任务执行完成才能执行。这里的 server任务的依赖任务就是dist任务。 我这里的dist任务是这样定义的。
/**
* 线上环境任务
* 任务：复制文件,js压缩,css完善压缩,图片压缩
*/
gulp.task('dist', ['copysource'],function(){
gulp.start(['jsminify','css','imagemin']);
});
这里的copysource任务是对其他文件的拷贝.由于简单就不列出了。
趋势
不管是gulp , grunt 还是 fis。 没有谁好谁坏，只有谁更适合。这些工具我动使用过，觉得gulp简单容易上手，fis是百度 的，感觉上手能到比grunt要好一点。因为我学习grunt的时候就是因为感觉配置繁琐而放弃，最终转向gulp的 。
而最近我使用的工具 webpack。呵呵！！！！！
工具越来越多，功能越来越强大。我觉得能处理当前面临的问题的工具就是好工具。