zoukankan      html  css  js  c++  java
  • Gulp-自动化编译sass和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/

  • 相关阅读:
    (转)ubuntu 对拍和基本操作
    一个在线翻译LateX的网站
    51nod 1376: 最长递增子序列的数量(二维偏序+cdq分治)
    BZOJ1087: [SCOI2005]互不侵犯King(状态压缩动态规划)
    ZOJ Problem Set
    bzoj2301:[HAOI2011]Problem b(容斥+莫比乌斯反演+分块)
    BZOJ 4318 OSU!期望DP
    CodeForces 235B Let's Play Osu!(概率)
    博客界面美化
    A+B Problem
  • 原文地址:https://www.cnblogs.com/padding1015/p/7805009.html
Copyright © 2011-2022 走看看