编译CSS
参见示例项目 gulp/css.js,该段代码包含SASS转义,CSS浏览器兼容前缀添加,构建文件清理,CSS文件监听。
执行编译CSS命令
包含清除已构建CSS文件、构建CSS、监听CSS文件任务。
$ gulp css
仅执行CSS构建命令
包含清除已构建JS文件、构建JS。
$ gulp css:build
示例代码
'use strict';
/**
* 1. 构建CSS文件
* • 编译SASS文件
* • 自动为CSS添加浏览器兼容前缀
* • 压缩CSS
* 2. 监听CSS文件变化并及时编译
*/
var config = require("./conf");
var path = require("path");
var gulp = require("gulp");
var rimraf = require("rimraf");
var $ = require("gulp-load-plugins")();
/**
* 构建CSS文件
*/
gulp.task("css:build", ["css:clean"], function(){
var cssFilter = $.filter("**/*.scss");
gulp.src(config.paths.srcCss)
.pipe($.sass({ outputStyle: 'expanded'}).on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers : ["last 2 version", "Android >= 4.0", "Firefox >= 4.0", "Explorer >= 6"],
cascade : true}))
.pipe($.if(config.system.compresses, $.minifyCss()))
.pipe(gulp.dest(config.paths.build));
});
/**
* 清除已构建的CSS文件
*/
gulp.task("css:clean", function(cb){
rimraf(config.paths.buildCss, cb);
});
/**
* 兼容CSS文件的变化并及时重构
*/
gulp.task("css:watch", function(){
gulp.watch(config.paths.srcCss, function(){
$.runSequence("css:build", "serve:reload");
});
})
/**
* 定义对外暴漏的任务名
*/
gulp.task("css", ["css:build", "css:watch"]);