使用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是怎麼運行的：

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

二、經過require導入依賴包，這就是咱們剛剛本地安裝的緣由

三、編寫gulp的task方法

四、當前文件夾下，命令行運行該方法便可：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']);

分享完畢！