先做一个简单的科普
gulp.src() 是用来定位执行路径的，参数通常是一个path
gulp.dest() 是用来定位输出路径的，执行的结果都会保存在这个路径下面，可以到路径下面查看结果
gulp.pipe() 将需要处理的内容导向一个插件
gulp.watch(glob, fn) 当glob内容发生改变时，执行fn
gulp.task() 定义一个gulp任务
var gulp = require(‘gulp‘); gulp.task(‘task1‘, function () { console.log(‘task1 done‘); }); gulp.task(‘task2‘, function () { console.log(‘task2 done!‘); }); gulp.task(‘task3‘, function () { console.log(‘task3 done‘); }); gulp.task(‘end‘, [‘task1‘, ‘task3‘, ‘task2‘], function () { console.log(‘end done‘); });
在我电脑上的执行结果是这样的
gulp.run(tasks...) 尽可能多的并行运行多个task
使用run()后，上述代码可修改为
var gulp = require(‘gulp‘); gulp.task(‘task1‘, function () { console.log(‘task1 done‘); }); gulp.task(‘task2‘, function () { console.log(‘task2 done!‘); }); gulp.task(‘task3‘, function () { console.log(‘task3 done‘); }); gulp.task(‘end‘, function () { gulp.run(‘task1‘,‘task3‘,‘task2‘); });
输出的结果为
结果没什么不正常，注意到一段话，说run()这个方法已经不被提倡了，建议使用watch()来代替，然而我还并不知道watch到底能做些什么，以后再说。
好，现在科普完毕，我们开始压缩css。
首先我们找到我们存放css的路径，注意，我们的所有路径都是相对于gulpfile.js这个文件来说的，也就是根目录，我的css文件是放在./css下的
然后我们要想好我们结果输出的路径，我就放在根目录下面的min文件夹好了，
想好这些以后我们就可以开始写代码了
var gulp = require(‘gulp‘); var sass = require(‘gulp-ruby-sass‘); var autoprefixer = require(‘gulp-autoprefixer‘); var minifycss = require(‘gulp-minify-css‘); var jshint = require(‘gulp-jshint‘); var uglify = require(‘gulp-uglify‘); var imagemin = require(‘gulp-imagemin‘); var rename = require(‘gulp-rename‘); var concat = require(‘gulp-concat‘); var notify = require(‘gulp-notify‘); var cache = require(‘gulp-cache‘); var livereload = require(‘gulp-livereload‘); var del = require(‘del‘); gulp.task(‘default‘, function() { //default task code }); gulp.task(‘minify-css‘, function(){ return gulp.src(‘./css/*.css‘) .pipe(rename({suffix: ‘.min‘})) .pipe(minifycss()) .pipe(gulp.dest(‘./min‘)) .pipe(notify({message: ‘minify-css task complete‘})); });
我不知道我会用到哪些插件，为了防止报错，我就全引用进来了，我们只需要关注minify-css这个task的代码段，而这个时候我已经不需要解释你就可以看懂了。
执行结果如下
而在我们的输出路径下也能看到我们的压缩文件
这样，我们不仅学会了如何压缩文件，也熟悉了gulp的API。
原文：http://www.cnblogs.com/zcynine/p/5196488.html