gulp的基本使用

gulp的基本使用

1：什麼是gulp？

gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器，既能夠對網站資源進行優化，也能夠對開發中的重複任務自動完成。

gulp是基於node的自動化構建工具，可以自動完成javascript/coffee/sass/css/html/image等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件再改動後重復指定的這些步驟。

gulp是基於任務的，經過插件的配合使用全面解決前端方案

原理是藉助Unix中的管道（pipe）思想，前一級輸入，後一級輸出。

gulp是採用流操做，grunt是採用I/O操做

2：gulp使用步驟

安裝node -> 經過npm全局安裝和項目安裝gulp -> 項目安裝gulp插件 -> 配置gulpfile.js -> 運行任務

1）安裝nodejs

gulp是基於node的，必須安裝node，安裝過程參照官網

2）檢查nodejs是否安裝成功

node -v
npm -v
cd ....
dir
cls

3）npm

npm install <name> [-g][--save-dev]
name:node插件名稱，npm install gulp-less --save-dev
-g:全局安裝，將會安裝到C:\Users\Administrator\AppData\Roaming\npm\node_modules，經過命令行在require()獲取
--save:將保存信息在package.json
-dev:將保存信息在package.json的devDependencies下，不指定-dev將會保存在dependiencs下
npm uninstall <name> [-g][--save-dev]
npm undate <name> [-g][--save-dev]
npm help
npm list

4）選裝cnpm

因爲npm安裝插件是從國外服務器下載，因此萬能的淘寶團隊作了一個npm的鏡像cnpm

地址：http://npm.taobao.org

安裝：npm install cnpm -g --registry=https://registry.npm.taobao.org

安裝後使用cnpm -v 查看版本號，直接使用有可能出現問題，把終端關掉從新打開在使用

cnpm與npm用法一直，用cnpm替代npm便可

5）全局安裝gulp

全局安裝gulp是爲了經過它執行gulp任務

安裝：

npm install gulp -g
npm install --global gulp

版本號查看： gulp -v

出現如下極爲安裝成功：

CLI version 3.9.1
Local version 3.9.1

6）新建package.json文件

package,jspn是基於nodejs項目必不可少的配置文件，是存放在項目根目錄的json文件，json文件是不能有註釋的

既能夠手動建立json文件

命令使用：

npm init

7）本地安裝gulp以及gulp插件

npm install --save-dev gulp
npm install gulp --save-dev

全局安裝gulp是爲了調用gulp
本地安裝gulp是爲了調用本地的gulp插件

8）新建gulpfile.js文件

gulpfile.js是gulp項目的配置屋文件，位於項目根目錄下的普通js文件

編輯：

var gulp = require("gulp"),//引入gulp模塊
less = require("gulp-less");//引入less模塊

/*定義一個taskless任務，任務名稱本身定義*/
gulp.task("testless",function(){
    gulp.src("src/less/index.less")//源文件
        .pipe(less())//調用模塊
        .pipe(gulp.dest("src/css"))//在src/css/目錄下生成css文件
});
/*定義默認任務，名稱固定*/
gulp.task("default",["testless"]);

9: 運行gulp

gulp 任務名稱

gulp testless

gulp default 或者gulp默認調用default裏的所用任務，按順序執行

10：使用webstorm運行gulp

打開gulpfile.js文件，右鍵鼠標，點擊Show Gulp Tasks，會出現一個任務窗口，雙擊一個任務就會執行該任務

11 gulp語法基礎

gulp經過gulpfile.js來完成任務

gulp有5個方法：src、dest、task、run、watch

src：指定源文件
dest：指定目標文件
task：指定任務
run：執行任務
watch：監放任務的變化

12 選擇gulp組件

gulp plugins ：尋找gulp組件

前端項目所須要的功能：

• 圖片：壓縮圖片支持jpg、png、gif
• 樣式：支持sass、lass等編譯，支持css的合併、壓縮、重命名
• javascript：檢測，合併，壓縮，重命名
• html：壓縮
• 客戶端同步刷新顯示修改
• 構建項目前清除發佈環境下的文件，從而保持發佈環境的乾淨

如下是所須要使用插件

• gulp-imagemin：圖片壓縮
• gulp-ruby-sass：支持sass編譯
• gulp-sass：支持sass編譯
• gulp-less：支持less編譯
• gulp-minify-css：壓縮css
• gulp-jshint：檢查js
• gulp-uglify：壓縮js
• gulp-concat：合併文件
• gulp-rename：重命名文件
• gulp-htmlmin：壓縮html
• gulp-clean：清空文件夾
• gulp-livereload：服務器控制客戶端同步刷新（需配合chrome插件LiveReload及tiny-lr）

在項目目錄下執行如下命令安裝插件

npm install gulp-imagemin gulp-ruby-sass gulp-miniy-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

13：編寫gulp

14：LiveReload配置

• 安裝Chrome插件 LiveReload
• 經過npm安裝http-server，快速創建http服務：npm install http-server -g
• 進入項目的發佈環境dist
• 運行http-server，默認端口號是8081
• 用瀏覽器打開：localhost:8081
• 打開另外一個cmd，進入項目執行gulp，清空壞境並初始化
• 執行監控gulp
• 點擊chrome上的LiveReload插件，空心變成實心即關聯上，你能夠修改css、js、html即時會顯示到頁面中。