基础支持 - 编译SASS ¶

• 作者：KK

• 发表日期：2016.6.23

需要安装gulp-sass模块，gulpfile的主要代码：

var sass = require('gulp-sass');

gulp.src('./src/**/**.scss')
	.pipe(sass().on('error', sass.logError))
	.pipe(gulp.dest('./dist'))

其中要加error事件的处理，这样才能在SASS代码语法出错时知道是哪里错

注意以上代码部署编译文件到dist的时候，文件名会自动变成css哦呵呵

监听同步 ¶

watch('./src/**/**.scss')
	.on('add', function(file){
		console.log(file + ' 添加');
		gulp.src(file, {base : './src'})
			.pipe(sass().on('error', sass.logError))
			.pipe(gulp.dest('./dist'));
	})
	.on('change', function(file){
		console.log(file + ' 修改');
		gulp.src(file, {base : './src'})
			.pipe(sass().on('error', sass.logError))
			.pipe(gulp.dest('./dist'));
	})
	.on('unlink', function(file){
		console.log(file + ' 删除');
		var distFile = './dist/' + path.relative('./src', file); //计算相对路径
		fs.existsSync(distFile) && fs.unlink(distFile);
	});

技巧提示（新手又能开窍啦！） ¶

注意使用SASS的import功能，比如在module1.scss里@import "common"，这样编译的时候会自动把common.scss的样式代码编译并合并进来再生成，这样页面上只要引用module1.css就可以有common.scss和module1.scss里面的样式代码啦

那么相应的，要编译LESS你上网自己搜一下吧，相信你能部署出来的