1.背景介紹
gulp與scss時至今日都已經不在是新鮮的東西，兩者并非新的語言，而是兩種前端領域上的突破，當然，每個人對新的技術的產生認識度都不同，對于實際生產上的意義也會體現出不同的表達方式，今天，只做個人在項目中的解決方案介紹，并非高談闊論，只與熱愛前端的同學做交流分享。
2.真槍實彈
下面，我將詳細介紹從零搭建一個gulp編譯scss的解決方案。
- 安裝nodeJS與npm(安裝過程略過。。。) 環境nodejs v6.9.2 npm v3.10.9
- 創建gulp-scss項目,結構大致如下：
Paste_Image.png
OK,終端打開當前文件底下命令窗口執行
npm init
此時項目文件中將會出現一個package.json的項目項目配置信息文件，里面將顯示項目所依賴的插件以及版本信息，作者等信息。接下來在package.json中配置安裝編譯scss所需要的依賴插件。
"devDependencies":{
"gulp": "^3.9.1",
"gulp-header": "^1.8.7",
"gulp-rename": "^1.2.2",
"gulp-minify-css": "^1.2.4",
"gulp-sass": "^2.3.2",
"dateformatter": "^0.1.0"
}
終端執行
npm install
項目中將出現node_modules插件模塊。
3.項目根目錄創建Gulpfile.js
var gulp =require('gulp');
var sass =require('gulp-sass');
var header =require('gulp-header');
var rename = require('gulp-rename');
var minifycss =require('gulp-minify-css');
var dateFormat = require('dateformatter').format;
var pkg =require('./package.json');
pkg.today = dateFormat;
var headerCommentInline = "/*! <%=pkg.description%> | Copyright (c) <%=pkg.today('Y') %> 18183, Inc. | <%= pkg.homepage %> | <%=pkg.today('Y-m-d H:i:s') %> */\n";
//編譯scss
gulp.task('scss',function() {
var distPath = './dist/css';
return gulp.src('src/scss/*.scss')
.pipe(sass({outputStyle:'expanded',sourcemap:false})) // nested, compact, expanded, compressed
.pipe(rename({ suffix: ".min" }))
.pipe(minifycss())
.pipe(gulp.dest(distPath))
.pipe(header(headerCommentInline,{pkg:pkg,fileName:function(file) {
var name = file.path.split(file.base+"\\");
return name[1];
}}))
.pipe(gulp.dest(distPath));
})
gulp.task('default',['scss'])
4.具體配置功能以及介紹
優秀的開源框架的scss源碼很多，類似于bootstrap 4的scss源碼，主要以全局函數以及方法的方式去編寫相應的組建模塊，還有weui完全組件模塊化的方式去構建scss源碼。我們這只提供編譯scss的解決方法，具體架構上可以參考優秀的框架。
rename插件主要是為了在編譯的過程中重命名輸出的文件名稱。
minifycss主要是壓縮css代碼，gulp-header主要是在編譯的過程中，動態添加css的版本信息，所有權，著作時間等。
5.完美輸出
配置好腳手架，終端執行
gulp
進行編譯，也可以創建watch實時動態去編譯scss文件。
