Gulp 第三篇 将sass编译之后的css合并为一个css文件输出 + css压缩

今天的目标是： 将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

没问题老铁~~