码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-11-17 10:50:18      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:记录   html   src   require   get   ase   tar   and   return   

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

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

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

 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改名功能。

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

标签:记录   html   src   require   get   ase   tar   and   return   

原文地址:http://www.cnblogs.com/padding1015/p/7805009.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!