前端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