Gulp API之怎样压缩CSS

 

先做一个简单的科普

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。