Gulp 自動化編譯sass和pug檔案

突然發現在我部落格文章中，缺少這一塊的記錄，那我就補一篇吧。

gulp的環境配置和安裝：

這裡就補充一篇gulpfile.js的配置，用於自動化編譯sass和pug檔案用：

1

var gulp = require('gulp');
2var pug = require('gulp-pug');
3var sass = require('gulp-sass');
4var rename = require('gulp-rename');
5var notify = require('gulp-notify');
6var plumber = require('gulp-plumber');78
var paths =;
1718 gulp.task('pug', function
() ))
21     .pipe(rename(function
(path)
26       path.basename =filename;
27return
path;
28}))
29.pipe(pug())
32.pipe(gulp.dest(paths.html))
33});
3435 gulp.task('sass', function
() ))
38     .pipe(sass())
39.pipe(gulp.dest(paths.css))
40});
4142 gulp.task('watch', ['sass'], function
() );
4647 gulp.task('default', ['watch', 'pug' ]);

沒有熱更新和瀏覽器自動重新整理功能，只是適用於編譯sass和pug，並且有持續監聽、不斷開gulp的功能、還有pug改名功能。

宣告：

博主：xing.org1^

出處：

Gulp 自動化編譯sass和pug檔案

突然發現在我部落格文章中，缺少這一塊的記錄，那我就補一篇吧。gulp的環境配置和安裝 這裡就補充一篇gulpfile.js的配置，用於自動化編譯sass和pug檔案用 1 var gulp require gulp 2var pug require gulp pug 3var sass requir...

Gulp 自動化構建

use gulp 官網 編譯 sass 合併優化壓縮 css 校驗壓縮 js 優化新增檔案指紋 md5 元件化頭部底部 include html 實時自動重新整理 gulp是前端開發過程中對 進行自動化構建的利器。它不僅能對資源進行優化，而且在開發過程中能夠通過配置自動完成很多重複的任務，讓我們可以...

gulp自動化打包（下）

本次打包大致過程是checkout出想要打包的git版本 可以是tag，也可以是branchname 然後依次讀取專案中的html less js進行壓縮合併等操作，複製專案中所用到的第三方庫到輸出目錄 即plugins中的外掛程式，比如lodash echarts等，前邊壓縮合併的js是自己寫的j...