1.mkdir project
2.cd project
3.新建package.json文件,并写入一对空{}
3. sudo npm install gulp --save-dev
4.sudo npm install gul-sass --save-dev
5.新建css, scss目录
5.新建gulpfile.js,引入gulp和gulp-sass:
var gulp = require('gulp'),
sass = require('gulp-sass');
创建一个名为sass的task任务
gulp.task('sass', function(){
return gulp.src('./scss/**/*.scss') // 匹配要编译的目录和文件
.pipe(sass({outputStyle: 'compact'}).on('error', sass.logError)) // 通过管道传输给sass()方法进行处理,同时进行相关配置
.pipe(gulp.dest('./css')); // 通过管道传输,将编译好的scss文件转换成了css文件,根据配置,放到指定文件下
})
输入gulp sass ,就会执行编译
这样一个简单的gulp 编译sass配置就完成了,但还无法实现监听(watch),即当我们改变scss文件内容,gulp自动监听并编译。
为了实现watch功能,需要新建一个task:
gulp.task('watch', function() {
gulp.watch('./scss/**/*.scss', ['sass']); // 第一个参数是要监听的目录和文件,第二个参数是监听的目录和文件只要有改动,那么就执行名为sass的task任务
});
输入 gulp watch
这样gulp的自动监听编译sass功能配置就基本完成了,
但是当我们编写的sass文件当中出现语法错误时,gulp监听就会报错,然后自动监听并重新编译的功能会失效,
为了最终能实现输入gulp,就能自动监听,还需要一些操作
1. sudo npm install gulp-notify --save-dev
2. 在项目中新建handleErrors.js文件
var notify = require('gulp-notify');
module.exports = function(){
var args = Array.prototype.slice.call(arguments);
notify.onError({
title: 'compile error',
message: '<%=error.message %>'
}).apply(this, args);//替换为当前对象
this.emit();//提交
}
创建handleErrors.js的目的是为了替换gulp-sass自带的错误处理方法
回到gulpfile.js文件,引入handleErrors.js:
var handleErrors = require('./handleErrors.js'); //注意引入路径,handleErrors根据需要随意放置,只要引入正确即可
找到这一行代码:
.pipe(sass({outputStyle: ''compact}).on('error', sass.logError)) // 不使用sass.logError
替换为
.pipe(sass({outputStyle: 'compact'}).on('error', handleErrors)) // 用我们自己写的handleErrors替代处理错误
3. 添加一个名为default的task任务:
gulp.task('default', ['sass', 'watch']);
这样在命令行输入gulp,gulp默认会去找名为default的task任务,并且顺带执行sass,和watch任务。
大功告成。
最后还要注意一点:
一般scss目录下有一个main.scss文件,作为入口文件, 引入其他scss文件,除了mian.scss文件,其余scss文件要加下划线_
例如_variables.scss , 这样css目录下最终只生成一个mian.css文件。