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文件。
