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/