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

Posted 2020-10-14 xing.org1^

适用于编译sass和pug，并且有持续监听、不断开gulp的功能、还有pug改名功能。

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

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

 

 

声明：

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

　　博主：xing.org1^

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