有兴趣的可以看一下,这里简单介绍一下Gulp如何配置编译less文件,合并生成的css文件以及压缩css文件。

QQ截图20170507220835

一、准备工作

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

gulp
gulp-less #less
gulp-concat
gulp-minify-css
gulp-rename
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']);