Gulp编译、合并、压缩

前段时间写过一篇文章介绍Gulp和Grunt的区别[Gulp和Grunt]，有兴趣的可以看一下，这里简单介绍一下Gulp如何配置编译less文件，合并生成的css文件以及压缩css文件。

一、准备工作

需要安装一下gulp插件：
前提是安装了node与npm模块。

1. gulp
2. gulp-less #less
3. gulp-concat
4. gulp-minify-css
5. gulp-rename
6. gulp-watch

安装命令: npm install gulp-less --save-dev

安装好插件后，接下来就是gulpfile.js文件。

二、配置gulpfile.js

# 引入插件
var gulp    = require('gulp');
var less  = require('gulp-less');
var concat = require('gulp-concat');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var watch  = require('gulp-watch');


# 定义一个编译ess文件的任务
gulp.task('lessback', function () {
    gulp.src('backend/web/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('backend/web/css/modules/'));
});


# 定义一个监控less文件变化的任务
gulp.task('back', function () {
    gulp.watch('backend/web/less/*.less', ['lessback']);
}); 


# 合并、压缩、重命名css
gulp.task('concatBackCss', function() {
  return gulp.src('backend/web/css/modules/*.css')
    .pipe(concat('backend.css'))
    .pipe(gulp.dest('backend/web/css/'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('backend/web/css/'));
});


#定义监控css文件变化的任务
#从而上面定义的执行合并，压缩任务
gulp.task('concatBack', function () {
    gulp.watch('backend/web/css/modules/*.css', ['concatBackCss']);
}); 

//定义默认任务
//（less编译，css合并、压缩）
gulp.task('default', ['back', 'concatBack']);