前段时间写过一篇文章介绍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']);