今天的目标是： 将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.jsvar gulp = require('gulp');var sass = require('gulp-sass'); // 编译scss 为 cssvar browserSync = require('browser-sync').create();var reload = browserSync.reload;var concat = require('gulp-concat'); // 合并cssvar 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

没问题老铁~~