Gulp-自动化编译sass和pug文件

突然发现在我博客文章中，缺少这一块的记录，那我就补一篇吧。

gulp的环境配置和安装：http://www.cnblogs.com/padding1015/p/7162024.html

这里就补充一篇gulpfile.js的配置，用于自动化编译sass和pug文件用：

 var gulp = require('gulp');
 var pug = require('gulp-pug');
 var sass = require('gulp-sass');
 var rename = require('gulp-rename');
 var notify = require('gulp-notify');
 var plumber = require('gulp-plumber');

 var paths = {
   // css
   sassWatch: 'scss/**/*.scss',
   css: 'css',
   // html
   pugWatch: 'views/*.pug',
   pugWatch2: 'views/**/*.pug',
   html: 'html'
 };

 gulp.task('pug', function () {
   return gulp.src(paths.pugWatch)
     .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
     .pipe(rename(function(path){
       var filename = path.basename.split('_')[1];
       if(!filename) {
         return path;
       }
       path.basename = filename;
       return path;
     }))
     .pipe(pug({
       pretty: true
     }))
     .pipe(gulp.dest(paths.html))
 });

 gulp.task('sass', function () {
   return gulp.src(paths.sassWatch)
     .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
     .pipe(sass({outputStyle: 'expanded'}))
     .pipe(gulp.dest(paths.css))
 });

 gulp.task('watch', ['sass'], function () {
   gulp.watch(paths.pugWatch2, ['pug']);
   gulp.watch(paths.sassWatch, ['sass']);
 });

 gulp.task('default', ['watch', 'pug' ]);

没有热更新和浏览器自动刷新功能，只是适用于编译sass和pug，并且有持续监听、不断开gulp的功能、还有pug改名功能。

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/