基本參照此：http://www.gulpjs.com.cn/docs/getting-started/
1、電腦需要安裝好nodejs，安裝好的時候會自帶npm
2、在命令行中執行命令安裝gulp
npm install --save-dev gulp
3、安裝sass進行scss文件的編譯（請注意，需要先安裝ruby）
npm install gulp-sass --save-dev
4、在網站根目錄建立一個gulpfile.js文件，代碼如下：
'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { return gulp.src('./sass/*.scss') //對所有的事件，只編譯來自當前目錄下的sass目錄下的所有scss文件 .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./assets/css')); }); gulp.task('sass:watch', function () { gulp.watch('./sass/*.scss', ['sass']); //當前目錄下的sass目錄下的所有scss文件的變更都會觸發"['sass']"任務（task） gulp.watch('./sass/**/*.scss', ['sass']);//當前目錄下的sass目錄下的任何目錄下的任何scss文件的改動都會觸發“['sass']”任務（task） });
如上可知，觸發條件，與編譯內容可以分別設置。
這樣有什么好處呢？
比如./assets/bases/colors.scss定義了顏色變量
./assets/index.scss使用了前面定義的變量。這個時候，只要修改了colors.scss就會觸發編譯，并且編譯出來的代碼又不會有它自身。
所以這種布局，可以將需要編譯的直接控制界面樣式的scss文件，和為scss文件提供變量、常量的scss文件分離開來。所有的scss文件改動都會觸發編譯，但是只會編譯./assets/index.scss，而不會將colors.scss中的內容完全編譯成獨立的colors.css文件。
浙公網安備 33010602011771號