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