有时我们不想使用 LESS 或 SASS而是直接编写 CSS，但我们需要压缩 CSS 以提高页面加载速度。
按照本章中压缩 JS 的方式，先编写 watchcss 任务
var minifycss = require('gulp-minify-css')
gulp.task('watchcss', function () {
gulp.watch('src/css/**/*.css', function (event) {
var paths = watchPath(event, 'src/', 'dist/')
gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
gutil.log('Dist ' + paths.distPath)
gulp.src(paths.srcPath)
.pipe(sourcemaps.init())
.pipe(minifycss())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.distDir))
})
})
gulp.task('default', ['watchjs','watchcss'])
autoprefixer 解析 CSS 文件并且添加浏览器前缀到CSS规则里。 通过示例帮助理解
autoprefixer 处理前：
.demo {
display:flex;
}
autoprefixer 处理后：
.demo {
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
}
你只需要关心编写标准语法的 css，autoprefixer 会自动补全。
在 watchcss 任务中加入 autoprefixer:
gulp.task('watchcss', function () {
gulp.watch('src/css/**/*.css', function (event) {
var paths = watchPath(event, 'src/', 'dist/')
gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
gutil.log('Dist ' + paths.distPath)
gulp.src(paths.srcPath)
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: 'last 2 versions'
}))
.pipe(minifycss())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.distDir))
})
})
有时我们也需要一次编译所有 css 文件。可以配置 minifyss 任务。
gulp.task('minifycss', function () {
gulp.src('src/css/**/*.css')
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: 'last 2 versions'
}))
.pipe(minifycss())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist/css/'))
})
在命令行输入 gulp minifyss 以压缩 src/css/ 下的所有 .css 文件并复制到 dist/css 目录下
