gulp css篇（sass为例）

有时候我们在编写css的时候，经常会需要重复编写一些元素的属性或者相同的父级元素，于是我们就有了各种各样的CSS预处理器让我们可以省去这些烦恼，更高效的编写，然而越写越多以后，我们就需要手动导入或者编译各种各样的sass文件，写完之后为了优化性能，我们还需要去压缩css文档，让它加载的更快，于是gulp的出现让css的处理更加自动化和高效，本篇主要写的是，如何导入sass文件，编译成css并压缩到指定路径。

相关插件
- node-sass
- cssnano
- wiredep
- gulp-inject
- browser-sync
目录

    |_app
        |_index.html
        |_css
            |_main.css
            |_style.css
        |_sass
            |_main.scss
            |_style.scss
    |_dist
        |_index.html
        |_css
            |_main.css
            |_style.css
    |_gulpfile.js

达成目标
- sass文件之间的导入
- sass编译成css
- css经过压缩到达dist区域
- css自动导入html文件中
- 导入bootstrap框架

目标一：css自动导入html文件中

使用gulp-inject即可，第一步是在index.html做好标记

    <!-- inject:css -->
    <!-- endinject -->

第二步是用gulpfiles文档中添加一个名为styles的task

var inject = require('gulp-inject');//安装相关依赖

gulp.task('index', function () {
  var target = gulp.src('app/index.html');
  //并不需要read读取内容，只需要路径就可以了，这样可以加快运行速度
  var sources = gulp.src(['./dist/js/*.js', './dist/css/*.css'], {read: false});
  return target.pipe(inject(sources,{relative: true}))//relative保证了我们可以去除根目录的dist/
    .pipe(gulp.dest('./dist'));//最后将导入后完整的index.html放到dist中
});

最后在dist目录下会生成一个完整的index.html，其中的标记为

    <!-- inject:css -->
    <link rel="stylesheet" href="../dist/css/styles.css">
    <!-- endinject -->

目标二：sass编译成css

sass编译成css是十分简单的，只需要使用sass()就可以了

var sass = require('gulp-sass');
gulp.src('app/scss/main.scss')
    .pipe(sass())//编译scss到css文件夹
    .pipe(gulp.dest('app/css'))

目标三：css的压缩

这个也是很简单的，只需要用cssnano这个插件就可以了

var cssnano = require('cssnano');

gulp.src('app/scss/main.scss')
    .pipe(cssnano())//压缩css文件夹到dist文件夹
    .pipe(gulp.dest('dist/css'))

目标四：sass文件之间的导入

我们知道sass文件的导入，一般会是@import 'filepath';，而在gulp中我们需要用到inject插件导入sass，其中会用到inject的一个自定义标签插入和匿名函数来创造相应的格式,例如这里我们要将app中的styles.scss导入main.scss中

var inject = reuire('gulp-inject');
var sources = gulp.src('app/scss/styles.scss');
    gulp.src('app/scss/main.scss')
        .pipe(inject(sources, {
            starttag: '//inject:app',
            endtag: '//endinject',
            transform: function (filepath) {
              return '@import"' + filepath + '";';
            },
            addRootSlash: false
          }))

然后同时我们会需要在main.scss中创造一个类似于上面目标一index.html中的label

//inject:app
//endinject

最后在terminal运行后，就会在main.scss中成功导入了scss文件

//inject:app
@import"app/scss/styles.scss";
//endinject

目标五：导入bootstrap框架

目前为止，我们学会如何通过sass文件导入编译成css并将其压缩到合适的位置，接下来我们会学习如何导入boorstrap框架，在这之前，我们会用到一个新的东西，叫bower，和npm很类似，这是一个前端框架的包管理器，而bootstrap正是通过它来导入的。
首先我们初始化bower
bower init
然后，安装我们所需要的框架
bower install bootstrap-sass --save
然后我们会用到叫做wiredep的插件，和inject很类似，只不过它是用来导入和bower相关的库或者框架的。
npm install wiredep --save-dev
只需要在代码中

var wiredep = require('wiredep').stream;
    gulp.src('app/scss/main.scss')
    .pipe(wiredep())
    .pipe(gulp.dest('app/scss')

并在main.scss中加上label

// bower:scss
// endbower

运行后变产生

// bower:scss
@import "../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endbower

完成代码

var gulp = require('gulp');
var sass = require('gulp-sass');
var inject = require('gulp-inject');
var wiredep = require('wiredep').stream;

gulp.task('styles', function() {
  var sources = gulp.src('app/scss/styles.scss', {read: false});
  return gulp.src('app/scss/main.scss')
        .pipe(wiredep())
        .pipe(inject(sources, {
            starttag: '//inject:app',
            endtag: '//endinject',
            transform: function (filepath) {
              return '@import"' + filepath + '";';
            },
            addRootSlash: false
          }))
        .pipe(gulp.dest('app/scss'))
        .pipe(sass())//编译scss到css文件夹
        .pipe(gulp.dest('app/css'))
        .pipe(cssnano())//压缩css文件夹到dist文件夹
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.reload({//保存后自动刷新浏览器
          stream: true
        }));
});

gulp.task('index', function () {
  var target = gulp.src('app/index.html');
  //并不需要read读取内容，只需要路径就可以了，这样可以加快运行速度
  var sources = gulp.src(['./dist/js/*.js', './dist/css/*.css'], {read: false});
  return target.pipe(inject(sources,{relative: true}))//relative保证了我们可以去除根目录的dist/
    .pipe(gulp.dest('./dist'));//最后将导入后完整的index.html放到dist中
});