使用gulp編譯sass

之前寫了一篇在ruby環境下如何編譯sass的文章：《css預處理器sass使用教程(多圖預警)》，隨着現在前端構建工具的興起，也學着使用這些工具來編譯sass。webpack存在一個CSS的處理平台-PostCSS，它可以幫助你的CSS實現更多的功能，安裝了postcss-loader 和 autoprefixer插件之后，配置相關的loaders就可以編譯使用了。我這里想介紹一下使用gulp編譯sass的方法。

node裝好之后，可以新建一個叫gulp的文件夾，在這個文件夾下面打開命令行窗口，先執行npm init的命令配置好package.json，然后再在當前目錄下本地安裝gulp，執行命令npm install gulp --save-dev（我通常安裝淘寶鏡像，所以執行cnpm install gulp --save-dev），安裝好gulp之后繼續安裝gulp-sass插件：npm install gulp-sass --save-dev（都是局部安裝的，方便require引入），到這，相關前期准備就算好了，你會看到package.json格式是這樣的：

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

上面出現了2個devDependencies，接下來簡單說下gulp是怎么運行的：

1、首先要創建一個gulp的配置文件，文件名叫gulpfile.js

2、通過require導入依賴包，這就是我們剛剛本地安裝的原因

3、編寫gulp的task方法

4、當前文件夾下，命令行運行該方法即可：gulp 方法名

我們試着執行一個HelloWorld的方法

gulpfile.js

gulp.task('HelloWorld', function() { 
  console.log('HelloWorld');
});

下面運行編譯sass

首先在glup文件夾下面新建一個app文件夾，在app文件夾下面新建一個scss文件夾，scss下面新建2個scss后綴的文件，分別是style.scss和index.scss

index.scss

$background: red;
div{
    background:$background;
}

style.scss

$width:100px;
div{
    width:$width;
}

編寫glup方法

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass111', function(){
  return gulp.src('app/scss/index.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
});

gulp.src()下是待處理文件，調用sass方法，輸出到gulp.dest()下的文件夾（同名輸出，文件夾會自動創建），執行sass111方法后

結果如下：

 

 

可是我們剛剛建的是2個scss文件，能否全部編譯，答案是肯定的，只需做一些細小的修改

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass111', function(){
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
});

*.scss 匹配當前目錄下所有以.scss結尾的文件
**/*.scss 匹配前目錄及所有子目錄下，所有以.scss結尾的文件
!not-me.scss不包含名為not-me.scss文件
*.+(scss|sass) 匹配當前目錄下所有以.scss或者.sass結尾的文件

執行后：

2個都編譯了，如果想監聽修改編譯，只需要增加wacth就可以了：

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass111', function(){
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
});
gulp.watch('app/scss/**/*.scss', ['sass111']);

sass默認輸出的樣式風格是嵌套輸出的方式，如下圖：

同時還有其他方式：

嵌套輸出方式 nested
展開輸出方式 expanded
緊湊輸出方式 compact
壓縮輸出方式 compressed

可以在調用sass方法那里修改輸出格式：sass({outputStyle: 'expanded'}).on('error', sass.logError)

本文練習最終代碼：

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('HelloWorld', function() { 
  console.log('HelloWorld');
});
gulp.task('sass111', function(){
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(gulp.dest('app/css'))
});
gulp.watch('app/scss/**/*.scss', ['sass111']);

分享完畢！