Gulp學習筆記

 

Gulp基於Node.js的前端構建工具，因此要先安裝node。關於node的安裝，參考：

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000

 

node安裝包下載：

https://nodejs.org/en/download/

 

安裝：

下載的是.msi安裝包，一路接受安裝。安裝完成後，打開cmd輸入path命令，查看到環境變量中有了剛纔的安裝目錄

輸入命令node -v，查看node的版本號

退出Node.js環境

連按兩次Ctrl+C。

NPM

在正式開始Node.js學習以前，先認識一下npm,，NPM是隨同NodeJS一塊兒安裝的包管理工具

爲啥咱們須要一個包管理工具呢？由於咱們在Node.js上開發時，會用到不少別人寫的JavaScript代碼。若是咱們要使用別人寫的某個包，每次都根據名稱搜索一下官方網站，下載代碼，解壓，再使用，很是繁瑣

有了npm，能夠直接執行命令來下載安裝，更重要的是，若是咱們要使用模塊A，而模塊A又依賴於模塊B，模塊B又依賴於模塊X和模塊Y，npm能夠根據依賴關係，把全部依賴的包都下載下來並管理起來。

常見的使用場景有如下幾種：

• 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
• 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
• 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。
• 輸入命令npm -v，查看npm的版本號

 

Gulp

自動化地完成 javascript 、 coffee、 sass 、 less 、 html/image 、 css 等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。

安裝：

首先要全局安裝一遍：

npm install --global gulp

全局的被安裝在：C:\Users\26395\AppData\Roaming\npm\node_modules\gulp

 

全局安裝gulp後，還須要在每一個要使用gulp的項目中都單獨安裝一次。把目錄切換到你的項目文件夾中，而後在命令行中執行：

npm install --save-dev gulp

ps:能夠在全部項目的根目錄安裝node_modules，這樣就不用在每一個項目都去安裝一遍

 

執行gulp時遇到問題：

Cannot find module ：

例如：Cannot find module 'gulp-uglify'，也就是缺乏gulp.js中所要用到的插件

執行命令安裝對應的插件到總module文件同級目錄下：

npm install --save-dev gulp-concat

會在node_modules同級目錄生成一個package-lock.json文件，每次安裝新的插件，這個文件會更新

 

多個插件一塊兒安裝：

npm install --save-dev gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del

 

gulp

安裝插件被牆，在當前目錄執行：

npm config set registry https://registry.npm.taobao.org

npm info underscore

 

gulp插件介紹：

 

運行gulp任務

需切換到存放 gulpfile.js 文件的目錄，而後在命令行中執行gulp命令，gulp後面能夠加上要執行的任務名，例如gulp task，若是沒有指定任務名，則會執行任務名爲default的默認任務。

G

ulp編寫：

建立一個gulpfile.js在根目錄下

 

加載插件：

var gulp = require('gulp'),

sass = require('gulp-ruby-sass'),

autoprefixer = require('gulp-autoprefixer'),

minifycss = require('gulp-minify-css'),

jshint = require('gulp-jshint'),

uglify = require('gulp-uglify'),

imagemin = require('gulp-imagemin'),

rename = require('gulp-rename'),

concat = require('gulp-concat'),

notify = require('gulp-notify'),

cache = require('gulp-cache'),

livereload = require('gulp-livereload'),

del = require('del');

上面的變量在下面的流管道工做中使用到。

 

創建任務：

任務api：

https://github.com/gulpjs/gulp/blob/master/docs/API.md

詳細使用教程：https://blog.csdn.net/u012863664/article/details/72578582

運行：

 

Gulp任務工做流程：

gulp.src(ad_js_arr)

.pipe(concat("stcAd.js"))

.pipe(uglify())

.pipe(gulp.dest(path.rel));

 

gulp.src：設置須要處理的文件的路徑，能夠是多個文件以數組的形式[main.scss, vender.scss]，也能夠是正則表達式/**/*.scss。

.pipe()這個API將須要處理的文件導向插件，通過插件處理後的流又能夠繼續導入到其餘插件中，也能夠把流寫入到文件中。

gulp.dest()API設置生成文件的路徑，一個任務能夠有多個生成路徑，一個能夠輸出未壓縮的版本，另外一個能夠輸出壓縮後的版本。

疑問：插件對文件的處理，又順序的要求嗎，好比得先壓縮再怎麼樣

 

使用依賴優化gulp 命令：

當有多個任務時，須要知道怎麼來控制任務的執行順序。能夠經過任務依賴來實現。例如我想要執行 one,two,three 這三個任務，那咱們就能夠定義一個空的任務，而後把那三個任務當作這個空的任務的依賴就好了：

//只要執行default任務，就至關於把one,two,three這三個任務執行了

gulp.task('default',['one','two','three']);

若是任務相互之間沒有依賴，任務就會按你書寫的順序來執行，若是有依賴的話則會先執行依賴的任務。

還有不少問題存在，好比 合併js的時候，使用 gulp-concat 生成的新js裏面，原來html裏面並無引用，還須要使用gulp-inject 來將生成的js注入到html，還有不少東西要學習。

異步任務處理：
若是某個任務所依賴的任務是異步的，就要注意了，gulp並不會等待那個所依賴的異步任務完成，而是會接着執行後續的任務，若是咱們想等待 異步任務 中的異步操做完成後再執行後續的任務，參考

https://blog.csdn.net/u012863664/article/details/72578582 的三種實現方法