今天的目标是: 将sass编译之后的css合并为一个css文件输出
首先我们的目录结构发生了一些变化
| node_modules
| src
| sass
- index.scss
- veriable.scss
- header.scss
| css
| gulpfile.js
| package.json
| index.html
整个项目的初始化构建我就不在重复了,在第一篇中讲过了哦~
模块安装
$ cnpm install -D browser-sync gulp gulp-concat gulp-sass gulp-clean-css
业务实现
// gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass'); // 编译scss 为 css
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var concat = require('gulp-concat'); // 合并css
var cleanCss = require('gulp-clean-css'); // css压缩
// 启动本地服务器 + 监听sass变化执行sass任务
gulp.task('server', ['sass','concat'], function() {
browserSync.init({
server: {
baseDir: './'
},
port: 3000
})
// 监听变化
gulp.watch('./src/sass/*.scss', ['sass','concat'])
})
// 合并任务: 将css下的多个css文件合并输出到build/css下面
gulp.task('concat', function(){
gulp.src(['./src/css/index.css', './src/css/header.css'])
.pipe(concat('main.css'))
.pipe(cleanCss())
.pipe(gulp.dest('./build/css'))
.pipe(reload({stream: true}))
})
// 编译任务:sass文件夹下的sass文件编译为css文件存放在src/css下面
gulp.task('sass', function() {
return gulp.src('./src/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./src/css'))
.pipe(reload({stream: true}))
})
执行
$ gulp server
没问题老铁~~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。