配置 CSS 任务

Gulp

Gulp 简介安装 Node 和 gulp 使用 gulp 压缩 JS 使用 gulp 压缩 CSS 使用 gulp 压缩图片使用 gulp 编译 LESS 使用 gulp 编译 Sass 使用 gulp 构建一个项目配置 JS 任务配置 CSS 任务配置 Less 任务配置 Sass 任务配置 image 任务配置文件复制任务

配置 CSS 任务

有时我们不想使用 LESS 或 SASS而是直接编写 CSS，但我们需要压缩 CSS 以提高页面加载速度。

gulp-minify-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'])

gulp-autoprefixer

autoprefixer 解析 CSS 文件并且添加浏览器前缀到CSS规则里。通过示例帮助理解

autoprefixer 处理前：

1
2
3

.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 目录下

上一篇:配置 JS 任务

下一篇:配置 Less 任务

我要发贴

Gulp