前端scss的使用及gulp發佈方式

  如標題所述,這篇博文是說scss以及gulp發佈方式;css

  若是你沒用過scss和gulp或不甚瞭解,你能夠看看這篇博文,敘說的水平有限,各位看官大神見諒;前端

  說scss以前,先來講說sass,sass是一種CSS的開發工具(前面的scss和less都是),提供了許多便利的寫法,大大節省了設計者的時間,使得CSS的開發,變得簡單和可維護;咱們都知道css不是一種編程語言,它只能定義描述樣式,沒法像編程語言同樣繼承和編譯,而sass給咱們提供這樣一種便利,或者說它就是這樣設計誕生的,sass中能夠寫入變量,使用表示層級關係的嵌套,導入其餘sass,定義代碼片斷並可傳參數,使用@extend來實現代碼組合聲明,進行運算等等功能,看起來很吊的樣子,來看一段代碼示例:node

$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的關係很是緊密,他們的區別是:jquery

  1. 文件擴展名不一樣,Sass 是以「.sass」後綴爲擴展名,而 SCSS 是以「.scss」後綴爲擴展名。
  2. 語法書寫方式不一樣,Sass 是以嚴格的縮進式語法規則來書寫,不帶大括號({})和分號(;),而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似。

   簡單對比下二者的差異,示例:ios

//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供使用,這也就牽涉到標題我說的發佈方式的問題。git

  在使用sass或者scss以前,通常要安裝ruby,其實書寫跟ruby沒啥關係,安裝ruby是要用ruby進行發佈,也便是發佈成css,我這裏就簡述前兩種發佈方式(固然發佈方式多種多樣,看你用那個),第一種是compass指令,也就是ruby來發布,打開命令行使用compass和watch指令,能夠將scss文件發佈成css文件,具體操做方式若是感興趣可自行百度,我這裏就不詳細累述了;第二種是使用圖形操做軟件,名字叫koala(還有種叫compass.app,由於相對於第一種,後面這兩個都是圖形界面的,就放一塊兒了),這個操做和理解起來容易一些(特別是對於不知道什麼是命令行的妹子),感興趣請自行百度,很快就上手的(注意這些貌似也依託於ruby的)。web

  補充一點sass的四種編譯形式,都是可選參數,關乎發佈後的css格式,SASS提供四個編譯風格的選項:npm

    * nested:嵌套縮進的css代碼,它是默認值。編程

  * expanded:沒有縮進的、擴展的css代碼。json

  * 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

相關文章
相關標籤/搜索