一个屌爆的编译scss解决方案

1.背景介绍

gulp与scss时至今日都已经不在是新鲜的东西，两者并非新的语言，而是两种前端领域上的突破，当然，每个人对新的技术的产生认识度都不同，对于实际生产上的意义也会体现出不同的表达方式，今天，只做个人在项目中的解决方案介绍，并非高谈阔论，只与热爱前端的同学做交流分享。

2.真枪实弹

下面，我将详细介绍从零搭建一个gulp编译scss的解决方案。

1. 安装nodeJS与npm(安装过程略过。。。) 环境nodejs v6.9.2 npm v3.10.9
2. 创建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文件。