關於前端自動化工具Gulp的使用(一)——初次接觸與安裝

背景

前段時間在網上看了一些優秀的前端面試者簡歷,
eg:
http://www.flqin.com/
http://zhangwenli.com/cv/
在我這初初初級階段看起來是十分高大上的,再看看自己的白紙一張的慘不忍睹的簡歷,於是萌發了向前輩們學習的心情,首先當然Star和Fork一下啦。然後開幹?

關於gulp

最開心的當然是竟然有Gulp中文網(Gulp中文網),雖然對於官方介紹文檔也是有些懵懵的,對於裏面的“祕籍”,不結合一些實際問題和各路大神的指點解釋不一定能懂,但細細查閱下來,簡單的安裝使用還是沒有問題的(應該。。。)

安裝流程

  1. 安裝Node、npm
  2. 選裝Cnpm
  3. 全局安裝gulp【特別說明:gulp需要安裝兩次,一全局,一局部】
  4. 創建package.json文件
  5. 安裝本地gulp (有大坑
  6. 新建gulpfile.js文件
  7. 安裝gulp插件
  8. 運行Gulp
1.node環境安裝&npm

這個因爲之前已經裝好了就不贅述,方法簡單,檢查是否已安裝方法如下:
在這裏插入圖片描述

2.選裝cnpm(官方網址:http://npm.taobao.org
npm install cnpm -g --registry=https://registry.npm.taobao.org

說明:因爲npm安裝插件是從國外服務器下載,受網絡影響大,可能出現異常。。。裝上這個東東就快了。。。
注1:安裝完後最好查看其版本號cnpm -v或關閉命令提示符重新打開,安裝完直接使用有可能會出現錯誤;
注2:cnpm跟npm用法完全一致,只是在執行命令時將npm改爲cnpm(以下操作將以cnpm代替npm)。

3、全局安裝gulp
npm install -g gulp

檢查是否正確安裝:
在這裏插入圖片描述

4.創建package.json文件 --初始化項目配置

進入項目目錄,創建package.json文件:

npm init -y //直接在後面加上 -y 會自動生成,省去一步步的選擇填空操作

在這裏插入圖片描述

5.安裝本地(局部)Gulp

在項目文件夾下安裝gulp,首先定位到那個目錄下,就可以在那個目錄下安裝本地gulp了:

npm install gulp --save-dev 

注1:這裏不要使用cnpm,這裏不要使用cnpm,這裏不要使用cnpm(重要的事情說三遍),使用npm即可(親測,用cnpm在安裝插件後運行gulp的時候會報錯?)
不然會遇到各種錯誤:
在這裏插入圖片描述
注2:–save-dev 是可以省掉你手動修改package.json文件的步驟,正常情況下得連同版本號手動將他們添加到模塊配置文件package.json中的依賴裏

安裝完了以後,在你安裝的那個目錄下邊會發現一個node-modules文件夾,以後用到的gulp插件都會在這個裏邊了。

6.新建gulpfile.js

說明:gulpfile.js是gulp項目的配置文件,是位於項目根目錄的普通js文件(其實將gulpfile.js放入其他文件夾下亦可)。
它大概是這樣一個js文件:

//導入工具包 require('node_modules裏對應模塊')
var gulp = require('gulp')//本地安裝gulp所用到的地方
 
//定義一個default任務(自定義任務名稱)
gulp.task('default', function () {
    console.log("Hello World!");
});
7.安裝Gulp插件
安裝命令:cnpm install 替換插件名稱 --save-dev

這裏按照網上一些介紹裝四個較基礎的

  1. 語法檢查 (gulp-jshint)
  2. 合併文件 (gulp-concat)
  3. 壓縮代碼 (gulp-uglify)
  4. 文件重命名 (gulp-rename)
8.運行Gulp
gulp default  或  gulp

以上爲目前正常使用的gulp初次接觸和安裝方法,可能還存在一些問題,待日後遇到會再詳細聊聊。O(∩_∩)O
參考鏈接:
https://www.cnblogs.com/rion1234567/p/5556891.html
http://www.ydcss.com/archives/18

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章