Gulp學習筆記（二）

實戰！

專案目錄如下

已經新建了gulpfile.js了

1. 自動化編譯scss

需要用到的外掛程式

*****> gulp-sass

<= 用來編譯scss**

*****> gulp-plumber

<= 如果編譯過程出錯的話程序會終止，這個外掛程式就可以讓它再次啟動，不需要人工操作

const gulp = require('gulp'),

sass = require('gulp-sass'),
plumber = require('gulp-plumber');
gulp.task('scss',function
()))
.pipe(gulp.dest('./src/css/'));//輸出至指定位置                
});//監聽gulp.watch第乙個引數位置制定檔案的變化，發生變化則執行第二個引數的任務
//即：編寫scss時儲存一下gulp就自動幫你編譯一次，不用手動執行 gulp scss
//但是如果編譯發生問題的話watch就會終止，你必須再次手動啟動，這是就看出plumber的作用了
gulp.task('watch',function
());
//一般在終端執行gulp任務都是 "gulp + 任務名"，但是如果指定任務名為 "default" 的話，就只用輸入 "gulp" 就行了
gulp.task('default',['scss','watch']);

2. 對檔名打md5碼, 對html，js進行壓縮

需要用到的外掛程式

*****> gulp-rev

<= 對檔名打md5碼

*****> gulp-rev-collector

<= 對html，css裡」src」 ,」href」, 「url」 中路徑的檔名進行修改，因為打完md5後檔名都變了

*****> gulp-minify-html

<= 對html**進行壓縮

*****> gulp-uglify

<=對js**進行壓縮

//用gulp新建了三個任務

gulp.task('a',function
(){});
gulp.task('b',function
(){});
gulp.task('c',function
(){});
//這是書寫預設任務
gulp.task('default',['a','b','c']);
//在終端執行 'gulp'

如果需要讓任務有順序地完成，可以用到 『gulp.task()』 的第二個引數（第乙個引數是任務名，第三個是任務的具體內容，就是function）

第二個引數填寫在此任務執行前需要完成的任務名，其實可以看一下第一段**中 『default』 任務的寫法，第二個引數就是現在說的（[『a』,』b』,』c』]，在執行完這三個任務後再執行 『default』 任務，當然，』default』 沒有任務內容）

如果希望以 『a』, 『b』, 『c』 的順序執行的話，需要這麼寫

//注意，最好寫返回值，因為執行是否成功是是否繼續執行下乙個任務的依據，不過不寫也沒問題，不過可能出錯不會被發現

gulp.task('a',function
());
gulp.task('b',['a'],function
());
//最後乙個不需要返回值
gulp.task('c',['b'],function
(){});

額外準備：

const rev = require('gulp-rev'),

jsuglify = require('gulp-uglify'),
minifyhtml = require('gulp-minify-html'),
revcollector = require('gulp-rev-collector');
//首先，為img檔案下的打碼
gulp.task('img',['scss'],function
());
//其次，為css檔案中的檔名修改名稱,即修改url路徑
gulp.task('cssurl',['img'],function
());
//然後，為css檔名打碼，並輸出至指定位置（此時css已經是壓縮檔案了，因為在scss編譯時已經為其壓縮了）
gulp.task('css',['cssurl'],function
());
// 同時，壓縮js檔案並為其檔名打碼，並輸出至指定位置
gulp.task('js',function
());
//最後，在為js與css檔名打完md5碼後，修改html中 對js與css引用的 'src' 與 'href' 路徑，並對其壓縮，輸出至指定位置（ps:此專案就乙個html檔案）
gulp.task('rev',['css','js'],function
()) )
.pipe( gulp.dest('../result/') );
});//最後的最後，指定預設任務，這是可有可無的
gulp.task('default',['rev']);
//儲存，在終端執行 'gulp' ，完成！！

就這樣，第一次gulp實戰結束了，其實一開始沒搞清楚那個非同步的問題，導致css檔案中url路徑修改一直不成功，雖然以前也寫過筆記的但是還是忘記了，看來還需要多多複習

至於好像還有可以實時重新整理的外掛程式就沒裝了，那個也是要儲存才能重新整理，就是省去了切屏重新整理的過程

gulp學習筆記2

1 gulp學習筆記1 2 gulp學習筆記2 3 gulp學習筆記3 4 gulp學習筆記4 壓縮 css 可降低 css 檔案大小，提高頁面開啟速度。目標 找到css 目錄下的所有 css 檔案，壓縮它們，將壓縮後的檔案存放在dist css 目錄下。在壓縮之前，需要安裝新的模組，輸入以下命令列...

gulp學習記錄

1.gulp的作用 以js為例，我們可能需要先把coffeescript轉譯成js，然後做一次語法檢查，然後再壓縮合併，最後才部署到生產。gulp就是用來把上述流程自動化的，並且現在像gulp和grunt這種工具一般都提供額外的實時重新整理伺服器，就是說，在開發過程中監視你的檔案改變，實時來幫你重新...

gulp入門學習

我們本該將更多的精力放在更有意義的事情上 所以，grunt gulp這一類構件工具出現了，將我們解救於重複的工作中。就自己的理解，自動化構件工具的核心是將我們的工作流抽離為乙個個任務 task 根據我們自己的需求，css的合併壓縮可以為乙個任務 js的合併壓縮可以為乙個任務 的壓縮也可以為乙個任務，...