前端日常工作是什么？拿到PSD图，然后开切！首先我们建立一个app的文件夹，然后在app下，我们建立img文件夹，接下来是 css …… 项目终于搞定之后，我们要使用在线压缩工具把样式表进行合并压缩，把所有的大尺寸图片重新导入Ps，保存为 web 格式，然后调整质量 。。。。。。
你就没想过偷懒的办法么？你就是这么把时间耗在没有意义的简单机械的活儿中么？
或者，很多前端都已经开始使用Grunt这样的工具了，自动压缩、自动打包、文件合并、Less,Sass 编译、文件监控、本地文件服务器调试环境。不错，基于Grunt另外推出了非常多的 generate ，类似 angularJS , Ember , Backbone, webapp, bootstrap 等等等等，但是 Grunt 的学习曲线也是非常陡的。虽然能够通过一些通用脚手架来搭建前端工程作为基础架构。一旦需要修改配置，则是异常痛苦。
gulp 的功效和 Grunt 也是异曲同工、插件也是异常丰富。
通过 Grunt 与 gulp 的对比。我个人还是比较喜欢 gulp 的一些操作模式。不管是从词法、编程语义的理解程度来说。gulp 都是优于 Grunt 。官网的介绍谈到了文件流、以及处理速度。因为没有现成的案例，所以不能妄自评论。下面就浅谈一下两者之间的使用细节。
这里引用?http://markgoodyear.com/2014/01/getting-started-with-gulp/ 中的例子：
Grunt
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'dist/assets/css/main.css': 'src/styles/main.scss',
}
}
},
autoprefixer: {
dist: {
options: {
browsers: [
'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
]
},
src: 'dist/assets/css/main.css',
dest: 'dist/assets/css/main.css'
}
},
grunt.registerTask('styles', ['sass', 'autoprefixer']);Gulp
gulp.task('sass', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'compressed' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
});
不管从代码还是从阅读性上来说，Gulp 不是更加优越一些嘛？从代码的输入和输出，以及事件的操作顺序一幕了然，完全不用在复杂的GruntFile中间去找各种各样的变量表达式。妈妈再也不用担心我的学习！
那么我们来一个简单的Case吧。
首先确保你安装了NodeJS。
然后运行
npm install gulp -g
安装 gulp 到你的系统环境中，创建好您的文件目录，在根目录中建立文件：package.json
package.json
{
"name": "project-demo",
"autho": "可乐加糖",
"email": "[email protected]",
"devDependencies": {
"del": "^1.1.1",
"gulp": "^3.8.10",
"gulp-autoprefixer": "^2.0.0",
"gulp-concat": "^2.4.3",
"gulp-imagemin": "^2.1.0",
"gulp-jshint": "^1.9.0",
"gulp-livereload": "^3.3.0",
"gulp-minify-css": "^0.3.12",
"gulp-notify": "^2.1.0",
"gulp-rename": "^1.2.0",
"gulp-sass": "^1.3.1",
"gulp-uglify": "^1.0.2"
},
"engines": {
"node": ">=0.10.0"
}
}
声明好你需要使用的插件包之后，npm install 开始安装所有的插件包。之后在文件夹根目录建立 gulpfile.js文件。
这里我写了一个基础代码（未完成版，已编译Scss，Js，Css 文件合并压缩，语法检查）提供给大家能够有一个直观的影响。稍后我会做成一个通用的部署脚本，添加所有的注释方便大家学习。并且把整个文件发布到Github之中作为前端工程模版。
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-sass'),
minifyCSS = require('gulp-minify-css'),
del = require('del');
//设置目录
var paths = {
scripts: 'app/js/',
images: 'app/imgs/',
css: 'app/css/',
scss: 'app/scss/',
build: 'build/'
};
//清理操作
gulp.task('clean', function(cb) {
del([paths.build], cb)
});
//JS语法检查
gulp.task('jshint', function() {
gulp.src(paths.scripts + "*.js")
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//编译SCSS
gulp.task('sass', function() {
gulp.src(paths.scss + "*.scss")
.pipe(sass())
//自动添加CSS3前缀
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest(paths.css));
});
//合并CSS
gulp.task('minify-css',['sass'], function() {
gulp.src(paths.css + '*.css')
.pipe(concat('all.css'))
.pipe(minifyCSS({
keepBreaks: true
}))
.pipe(gulp.dest(paths.build + "css"))
});
//合并与脚本压缩
gulp.task('minify', function() {
gulp.src(paths.scripts + "*.js")
.pipe(jshint())
.pipe(concat('all.js'))
.pipe(gulp.dest(paths.scripts))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest(paths.build + "js"))
});
//文件监控
gulp.task('name',['tasks'], function() {
});
gulp.task('default', ['clean'], function() {
console.log("请进行任务配置");
});
gulp.task('build',['clean'], function() {
gulp.run('jshint','minify-css','minify')
});参考资料：
- http://www.html-js.com/article/Task-runs-Gulp-for-task-Gulp-based-tutorial
- https://www.npmjs.com/search?q=gulp&page=1
- http://segmentfault.com/blog/laopopo/1190000000372547?page=1