如標題所述,這篇博文是說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
簡單對比下二者的差異,示例: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