gulp css篇（sass為例）
有時候我們在編寫css的時候图焰，經(jīng)常會需要重復(fù)編寫一些元素的屬性或者相同的父級元素兄朋，于是我們就有了各種各樣的CSS預(yù)處理器讓我們可以省去這些煩惱，更高效的編寫，然而越寫越多以后，我們就需要手動導(dǎo)入或者編譯各種各樣的sass文件，寫完之后為了優(yōu)化性能久窟，我們還需要去壓縮css文檔，讓它加載的更快本缠，于是gulp的出現(xiàn)讓css的處理更加自動化和高效斥扛，本篇主要寫的是，如何導(dǎo)入sass文件丹锹，編譯成css并壓縮到指定路徑稀颁。
- 相關(guān)插件
- node-sass
- cssnano
- wiredep
- gulp-inject
- browser-sync
- 目錄
|_app
|_index.html
|_css
|_main.css
|_style.css
|_sass
|_main.scss
|_style.scss
|_dist
|_index.html
|_css
|_main.css
|_style.css
|_gulpfile.js
- 達成目標(biāo)
- sass文件之間的導(dǎo)入
- sass編譯成css
- css經(jīng)過壓縮到達dist區(qū)域
- css自動導(dǎo)入html文件中
- 導(dǎo)入bootstrap框架
目標(biāo)一：css自動導(dǎo)入html文件中
使用gulp-inject即可，第一步是在index.html做好標(biāo)記
<!-- inject:css -->
<!-- endinject -->
第二步是用gulpfiles文檔中添加一個名為styles的task
var inject = require('gulp-inject');//安裝相關(guān)依賴
gulp.task('index', function () {
var target = gulp.src('app/index.html');
//并不需要read讀取內(nèi)容楣黍，只需要路徑就可以了匾灶，這樣可以加快運行速度
var sources = gulp.src(['./dist/js/*.js', './dist/css/*.css'], {read: false});
return target.pipe(inject(sources,{relative: true}))//relative保證了我們可以去除根目錄的dist/
.pipe(gulp.dest('./dist'));//最后將導(dǎo)入后完整的index.html放到dist中
});
最后在dist目錄下會生成一個完整的index.html，其中的標(biāo)記為
<!-- inject:css -->
<link rel="stylesheet" href="../dist/css/styles.css">
<!-- endinject -->
目標(biāo)二：sass編譯成css
sass編譯成css是十分簡單的租漂，只需要使用sass()就可以了
var sass = require('gulp-sass');
gulp.src('app/scss/main.scss')
.pipe(sass())//編譯scss到css文件夾
.pipe(gulp.dest('app/css'))
目標(biāo)三：css的壓縮
這個也是很簡單的阶女，只需要用cssnano這個插件就可以了
var cssnano = require('cssnano');
gulp.src('app/scss/main.scss')
.pipe(cssnano())//壓縮css文件夾到dist文件夾
.pipe(gulp.dest('dist/css'))
目標(biāo)四：sass文件之間的導(dǎo)入
我們知道sass文件的導(dǎo)入，一般會是@import 'filepath';哩治，而在gulp中我們需要用到inject插件導(dǎo)入sass秃踩，其中會用到inject的一個自定義標(biāo)簽插入和匿名函數(shù)來創(chuàng)造相應(yīng)的格式,例如這里我們要將app中的styles.scss導(dǎo)入main.scss中
var inject = reuire('gulp-inject');
var sources = gulp.src('app/scss/styles.scss');
gulp.src('app/scss/main.scss')
.pipe(inject(sources, {
starttag: '//inject:app',
endtag: '//endinject',
transform: function (filepath) {
return '@import"' + filepath + '";';
},
addRootSlash: false
}))
然后同時我們會需要在main.scss中創(chuàng)造一個類似于上面目標(biāo)一index.html中的label
//inject:app
//endinject
最后在terminal運行后，就會在main.scss中成功導(dǎo)入了scss文件
//inject:app
@import"app/scss/styles.scss";
//endinject
目標(biāo)五：導(dǎo)入bootstrap框架
目前為止业筏，我們學(xué)會如何通過sass文件導(dǎo)入編譯成css并將其壓縮到合適的位置憔杨，接下來我們會學(xué)習(xí)如何導(dǎo)入boorstrap框架，在這之前蒜胖，我們會用到一個新的東西消别，叫bower抛蚤，和npm很類似，這是一個前端框架的包管理器妖啥，而bootstrap正是通過它來導(dǎo)入的霉颠。
首先我們初始化bower
bower init
然后对碌，安裝我們所需要的框架
bower install bootstrap-sass --save
然后我們會用到叫做wiredep的插件荆虱，和inject很類似，只不過它是用來導(dǎo)入和bower相關(guān)的庫或者框架的朽们。
npm install wiredep --save-dev
只需要在代碼中
var wiredep = require('wiredep').stream;
gulp.src('app/scss/main.scss')
.pipe(wiredep())
.pipe(gulp.dest('app/scss')
并在main.scss中加上label
// bower:scss
// endbower
運行后變產(chǎn)生
// bower:scss
@import "../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endbower
完成代碼
var gulp = require('gulp');
var sass = require('gulp-sass');
var inject = require('gulp-inject');
var wiredep = require('wiredep').stream;
gulp.task('styles', function() {
var sources = gulp.src('app/scss/styles.scss', {read: false});
return gulp.src('app/scss/main.scss')
.pipe(wiredep())
.pipe(inject(sources, {
starttag: '//inject:app',
endtag: '//endinject',
transform: function (filepath) {
return '@import"' + filepath + '";';
},
addRootSlash: false
}))
.pipe(gulp.dest('app/scss'))
.pipe(sass())//編譯scss到css文件夾
.pipe(gulp.dest('app/css'))
.pipe(cssnano())//壓縮css文件夾到dist文件夾
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({//保存后自動刷新瀏覽器
stream: true
}));
});
gulp.task('index', function () {
var target = gulp.src('app/index.html');
//并不需要read讀取內(nèi)容怀读，只需要路徑就可以了，這樣可以加快運行速度
var sources = gulp.src(['./dist/js/*.js', './dist/css/*.css'], {read: false});
return target.pipe(inject(sources,{relative: true}))//relative保證了我們可以去除根目錄的dist/
.pipe(gulp.dest('./dist'));//最后將導(dǎo)入后完整的index.html放到dist中
});
