突然发现在我博客文章中，缺少这一块的记录，那我就补一篇吧。
gulp的环境配置和安装：http://www.cnblogs.com/padding1015/p/7162024.html
这里就补充一篇gulpfile.js的配置，用于自动化编译sass和pug文件用：
代码语言：javascript复制 1 var gulp = require('gulp');
2 var pug = require('gulp-pug');
3 var sass = require('gulp-sass');
4 var rename = require('gulp-rename');
5 var notify = require('gulp-notify');
6 var plumber = require('gulp-plumber');
7
8 var paths = {
9 // css
10 sassWatch: 'scss/**/*.scss',
11 css: 'css',
12 // html
13 pugWatch: 'views/*.pug',
14 pugWatch2: 'views/**/*.pug',
15 html: 'html'
16 };
17
18 gulp.task('pug', function () {
19 return gulp.src(paths.pugWatch)
20 .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
21 .pipe(rename(function(path){
22 var filename = path.basename.split('_')[1];
23 if(!filename) {
24 return path;
25 }
26 path.basename = filename;
27 return path;
28 }))
29 .pipe(pug({
30 pretty: true
31 }))
32 .pipe(gulp.dest(paths.html))
33 });
34
35 gulp.task('sass', function () {
36 return gulp.src(paths.sassWatch)
37 .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
38 .pipe(sass({outputStyle: 'expanded'}))
39 .pipe(gulp.dest(paths.css))
40 });
41
42 gulp.task('watch', ['sass'], function () {
43 gulp.watch(paths.pugWatch2, ['pug']);
44 gulp.watch(paths.sassWatch, ['sass']);
45 });
46
47 gulp.task('default', ['watch', 'pug' ]);没有热更新和浏览器自动刷新功能，只是适用于编译sass和pug，并且有持续监听、不断开gulp的功能、还有pug改名功能。
声明：
请尊重博客园原创精神，转载或使用图片请注明：
博主：xing.org1^
出处：http://www.cnblogs.com/padding1015/
