gulp css篇（sass为例）
有时候我们在编写css的时候，经常会需要重复编写一些元素的属性或者相同的父级元素，于是我们就有了各种各样的CSS预处理器让我们可以省去这些烦恼，更高效的编写，然而越写越多以后，我们就需要手动导入或者编译各种各样的sass文件，写完之后为了优化性能，我们还需要去压缩css文档，让它加载的更快，于是gulp的出现让css的处理更加自动化和高效，本篇主要写的是，如何导入sass文件，编译成css并压缩到指定路径。
- 相关插件
- 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
- 达成目标
- sass文件之间的导入
- sass编译成css
- css经过压缩到达dist区域
- css自动导入html文件中
- 导入bootstrap框架
目标一：css自动导入html文件中
使用gulp-inject即可，第一步是在index.html做好标记
<!-- inject:css -->
<!-- endinject -->
第二步是用gulpfiles文档中添加一个名为styles的task
var inject = require('gulp-inject');//安装相关依赖
gulp.task('index', function () {
var target = gulp.src('app/index.html');
//并不需要read读取内容，只需要路径就可以了，这样可以加快运行速度
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'));//最后将导入后完整的index.html放到dist中
});
最后在dist目录下会生成一个完整的index.html，其中的标记为
<!-- inject:css -->
<link rel="stylesheet" href="../dist/css/styles.css">
<!-- endinject -->
目标二：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'))
目标三：css的压缩
这个也是很简单的，只需要用cssnano这个插件就可以了
var cssnano = require('cssnano');
gulp.src('app/scss/main.scss')
.pipe(cssnano())//压缩css文件夹到dist文件夹
.pipe(gulp.dest('dist/css'))
目标四：sass文件之间的导入
我们知道sass文件的导入，一般会是@import 'filepath';，而在gulp中我们需要用到inject插件导入sass，其中会用到inject的一个自定义标签插入和匿名函数来创造相应的格式,例如这里我们要将app中的styles.scss导入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中创造一个类似于上面目标一index.html中的label
//inject:app
//endinject
最后在terminal运行后，就会在main.scss中成功导入了scss文件
//inject:app
@import"app/scss/styles.scss";
//endinject
目标五：导入bootstrap框架
目前为止，我们学会如何通过sass文件导入编译成css并将其压缩到合适的位置，接下来我们会学习如何导入boorstrap框架，在这之前，我们会用到一个新的东西，叫bower，和npm很类似，这是一个前端框架的包管理器，而bootstrap正是通过它来导入的。
首先我们初始化bower
bower init
然后，安装我们所需要的框架
bower install bootstrap-sass --save
然后我们会用到叫做wiredep的插件，和inject很类似，只不过它是用来导入和bower相关的库或者框架的。
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
运行后变产生
// 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读取内容，只需要路径就可以了，这样可以加快运行速度
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'));//最后将导入后完整的index.html放到dist中
});
网友评论