前端scss的使用及gulp发布方式

　　如标题所述，这篇博文是说scss以及gulp发布方式；

　　如果你没用过scss和gulp或不甚了解，你可以看看这篇博文，叙说的水平有限，各位看官大神见谅；

　　说scss之前，先来说说sass，sass是一种CSS的开发工具(前面的scss和less都是)，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护；我们都知道css不是一种编程语言，它只能定义描述样式，无法像编程语言一样继承和编译，而sass给我们提供这样一种便利，或者说它就是这样设计诞生的，sass中可以写入变量，使用表示层级关系的嵌套，导入其他sass,定义代码片段并可传参数，使用@extend来实现代码组合声明，进行运算等等功能，看起来很吊的样子，来看一段代码示例：

$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;

body {
  font-family: $fontStack;
  color: $primaryColor;
}
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}

　　示例中给出的分布是变量、嵌套、mixin的示例，详细使用方法大家可以去看官方文档sass，而我要说的scss跟这个sass的关系非常紧密，他们的区别是：

1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名。
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

 　　简单对比下两者的差别，示例：

//sass写法
$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

//scss写法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

　　在升级顺序上，可以把scss看成是sass的一种进阶写法，书写起来更方便，如果你使用scss惯了，就会明白它的便利之处，越用越顺手。说到这里，大家应该对scss有个比较清晰的认识了吧。要注意的是，无论是sass、scss或者less，在生产环境中都是要转换成css供页面引用的，也就是说，我们最初编码的时候，使用scss写样式，但是最终需要编译成css供使用，这也就牵涉到标题我说的发布方式的问题。

　　在使用sass或者scss之前，一般要安装ruby，其实书写跟ruby没啥关系，安装ruby是要用ruby进行发布，也即是发布成css，我这里就简述前两种发布方式(当然发布方式多种多样，看你用那个)，第一种是compass指令，也就是ruby来发布，打开命令行使用compass和watch指令，可以将scss文件发布成css文件，具体操作方式如果感兴趣可自行百度，我这里就不详细累述了；第二种是使用图形操作软件，名字叫koala(还有种叫compass.app，因为相对于第一种，后面这两个都是图形界面的，就放一起了)，这个操作和理解起来容易一些(特别是对于不知道什么是命令行的妹子)，感兴趣请自行百度，很快就上手的(注意这些貌似也依托于ruby的)。

　　补充一点sass的四种编译形式，都是可选参数，关乎发布后的css格式，SASS提供四个编译风格的选项：

　   * nested：嵌套缩进的css代码，它是默认值。

　　* expanded：没有缩进的、扩展的css代码。

　　* compact：简洁格式的css代码。

　　* compressed：压缩后的css代码。

　　好了，下面到我要细说的gulp发布方式了，如果你不知道gulp，好吧我从头说起吧，近些年node.js很火，衍生出很多新技术，在很多地方有应用，以快速轻量级著称，使用node.js可以从前台写到后台，也即是全栈开发，几句代码可以创建web服务器，这使得习惯使用iis的我目瞪口呆，一个字吊，美帝掌握核心科技，不服不行，互联网方面美帝真是领先全球，创新力几十年内无人能超越(不信？安卓、ios、facebook、jquery、git等等例子太多，都是美帝出品，全世界在模仿使用)，好吧跑题了，总之非常厉害，这里要说的gulp又是个什么鬼？(gulp中文网，强扭的瓜不甜，详细的请君翻阅相关官方api)，gulp是基于node.js的一个工具模块，主要用来整合发布前端资源，包括图片、css、font、js等，通过配置，可以创建多种任务，轻松实现对前端资源的发布和监控工作；因为其基于node.js，使用前要安装node.js，使用npm管理器安装，配置好任务后就可以使用啦，就是这么酸爽有木有。

　　gulp的安装使用；gulp使用npm包管理器进行安装(如果你不知道npm，请移步百度或者谷歌之，我觉得我好啰嗦......以后这句就都省了哈)，在使用npm安装的时候，依赖一个叫package.json的文件，package.json文件描述了一个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息。格式必须是严格的JSON格式；通常我们在创建一个NPM程序时，可以使用npm init命令，通过交互式的命令，自动生成一个package.json文件，里面包含了常用的一些字段信息，但远不止这么简单。通过完善package.json文件，我们可以让npm命令更好地为我们服务；也就是说package里定义了一系列信息，来定义信息和安装依赖，以我以前的一个项目为例：

　　这里定义了一些信息和安装的组件，也就是gulp，其实前端发布也不过是mini、concat、rename、uglify、del等几个步骤，大家看图就明白组件的意思了，package定义好后就可以安装了，npm install全部安装，然后自定义gulp任务，也即是上图的gulpfile.js，通过一系列的任务定义，完成前端的发布或者监听任务，书写模式多种多样，不一而定，用的惯就好。

　　gulpfile.js也暴露出来吧给大家：

var gulp = require('gulp'),
    gulpif = require('gulp-if'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    stylish = require('jshint-stylish'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    spritesmith = require('gulp-spritesmith'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');


gulp.task('styles', function() {
  return gulp.src('mGlobal/css/*.css')
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('./dist/css'))
    .pipe(notify({message: 'Styles task complete'}));
});

gulp.task('scripts', function() {
  return gulp.src('mGlobal/js/**/*.js')
    //.pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter(stylish))
    // .pipe(concat('main.js'))
    // .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

gulp.task('fonts', function() {
  return gulp.src('mGlobal/fonts/**/*')
    .pipe(gulp.dest('dist/fonts'))
    .pipe(notify({message: 'Fonts task complete'}));
});

gulp.task('images', ['sprites'], function() {
  return gulp.src('mGlobal/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});

gulp.task('sprites', function () {
  // Sprites task...
    return gulp.src(['mGlobal/images/**/*.png', '!mGlobal/images/sprites.png'])
      .pipe(spritesmith({
        imgName: 'sprites.png',
        styleName: 'sprites.css',
        imgPath: '../images/sprites.png'
      }))
      .pipe(gulpif('*.png', gulp.dest('mGlobal/images')))
      .pipe(gulpif('*.css', gulp.dest('mGlobal/css')));
});

gulp.task('clean', function(cb) {
  del(['dist'], cb)
});

gulp.task('watch', function() {
  // Create LiveReload server
  livereload.listen();

  // Watch any files in dist/, reload on change
  gulp.watch(['mGlobal/**']).on('change', livereload.changed);
});

gulp.task('default', ['clean'], function() {
  gulp.start(['styles', 'scripts', 'sprites', 'images', 'fonts']);
});

 

　　gulp.task后就是自定义的任务，可以单个运行也可以合并运行，比如 gulp scripts,gulp default，看代码可知是将mGlobal中的资源发布的dist文件夹中，从而完成我们需要的任务，监听发布则使用watch任务就可以了，所以gulp配置好了，感觉比前面说的图形界面发布和compas要好用(至少我这么认为)，看你习惯用那种了；

　　哦对了，这个示例是我前一个项目，没有用scss写，scss发布跟这个很接近了，改成scss发布就行了；

　　差不多该说的都说了吧，如果大家有什么不明白的可以百度谷歌之或者与我交流下，叙述水平有限，有纰漏的地方欢迎大家指正。

　　

　　原文地址：前端scss的使用及gulp发布方式，薛陈磊 | Share the world