背景
前段時間在網上看了一些優秀的前端面試者簡歷,
eg:
http://www.flqin.com/
http://zhangwenli.com/cv/
在我這初初初級階段看起來是十分高大上的,再看看自己的白紙一張的慘不忍睹的簡歷,於是萌發了向前輩們學習的心情,首先當然Star和Fork一下啦。然後開幹?
關於gulp
最開心的當然是竟然有Gulp中文網(Gulp中文網),雖然對於官方介紹文檔也是有些懵懵的,對於裏面的“祕籍”,不結合一些實際問題和各路大神的指點解釋不一定能懂,但細細查閱下來,簡單的安裝使用還是沒有問題的(應該。。。)
安裝流程
- 安裝Node、npm
- 選裝Cnpm
- 全局安裝gulp【特別說明:gulp需要安裝兩次,一全局,一局部】
- 創建package.json文件
- 安裝本地gulp (有大坑)
- 新建gulpfile.js文件
- 安裝gulp插件
- 運行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
這裏按照網上一些介紹裝四個較基礎的
- 語法檢查 (gulp-jshint)
- 合併文件 (gulp-concat)
- 壓縮代碼 (gulp-uglify)
- 文件重命名 (gulp-rename)
8.運行Gulp
gulp default 或 gulp
以上爲目前正常使用的gulp初次接觸和安裝方法,可能還存在一些問題,待日後遇到會再詳細聊聊。O(∩_∩)O
參考鏈接:
https://www.cnblogs.com/rion1234567/p/5556891.html
http://www.ydcss.com/archives/18