天下一家·MJ

博客园 首页 新随笔 联系 订阅 管理

基本参照此:http://www.gulpjs.com.cn/docs/getting-started/

1、电脑需要安装好nodejs,安装好的时候会自带npm

2、在命令行中执行命令安装gulp

npm install --save-dev gulp

3、安装sass进行scss文件的编译(请注意,需要先安装ruby)

npm install gulp-sass --save-dev

4、在网站根目录建立一个gulpfile.js文件,代码如下:

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/*.scss')  //对所有的事件,只编译来自当前目录下的sass目录下的所有scss文件
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./assets/css'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/*.scss', ['sass']); //当前目录下的sass目录下的所有scss文件的变更都会触发"['sass']"任务(task)
  gulp.watch('./sass/**/*.scss', ['sass']);//当前目录下的sass目录下的任何目录下的任何scss文件的改动都会触发“['sass']”任务(task)
});

如上可知,触发条件,与编译内容可以分别设置。

这样有什么好处呢?

比如./assets/bases/colors.scss定义了颜色变量

./assets/index.scss使用了前面定义的变量。这个时候,只要修改了colors.scss就会触发编译,并且编译出来的代码又不会有它自身。

所以这种布局,可以将需要编译的直接控制界面样式的scss文件,和为scss文件提供变量、常量的scss文件分离开来。所有的scss文件改动都会触发编译,但是只会编译./assets/index.scss,而不会将colors.scss中的内容完全编译成独立的colors.css文件。

posted on 2016-08-29 17:22  天下一家·MJ  阅读(219)  评论(0编辑  收藏  举报
友情链接Tkin的技术博客