gulp安裝流程、使用方法及cmd經常使用命令導覽

時間 2019-11-07

標籤 gulp 安裝流程使用方法 cmd 經常使用命令欄目 JavaScript 简体版

原文原文鏈接

gulp安裝流程、使用方法及CMD經常使用命令導覽

來自前端小白的gulp及周邊知識學習總結css

　　　　1、名詞介紹：

Npm——node包管理工具html

一開始我不理解，包管理工具是什麼鬼。後來用到的gulp也好，gulp的插件包也好，都是要在npm這個裏邊弄出來的。前端

能夠理解爲，一個硬盤，裏邊放的各類整理好的、適用於各類功能的且不重複的文件夾（插件），而後咱們須要啥，就去裏邊摘下來。node

固然也能夠用它來刪除插件git

rimraf刪除gulp的模塊插件github

一、安裝：npm install -g rimraf（全局安裝），若是安裝了cnpm，也可以使用cnpm install -g rimraf 命令chrome

二、使用：先定位目標文件夾的父級目錄，而後命令行輸入rimraf ***（***爲須要刪除的文件夾名稱）npm

//反正基於他的命令語句就有不少，經常使用的我先搞到這裏
//其餘相應的放到相應上下文中好了，原本打算單獨搞一篇，可是沒頭沒尾的，適合有基礎的查字典用
//不過能夠考慮整理一個「字典」json

Cnpmgulp

Gulp——前端自動化系統構建工具

好吧，我知道這不說人話了額，由於我剛看到這幾個字也是冪次方臉懵逼。說白了就是一個「流水線工做臺」

Package.json——基於nodejs項目必不可少的配置文件，存放於項目跟目錄，普通的json文件。

json文件內不能寫註釋，因此package文件內也不能有註釋信息

Gulpfile.js——gulp項目配置文件

全局目錄：管理員目錄C:\Users\Administrators。（後來發現，不一樣人的電腦，管理員目錄是不同的：有的是C:\Users\Administrators，可是有的人是在一個Appdata的隱藏文件夾下的更深的目錄裏)

本地目錄：除c盤之外，任何其餘硬盤中一個你放置本身項目的文件夾路徑。好比個人項目放在了D盤的test文件夾中，那個人本地目錄就是：D:\test

　　　　2、安裝流程：

　　1．Node環境安裝

　　2．Npm-

　　3．->Cnpm

　　4．安裝gulp【特別說明：gulp須要安裝兩次，一全局，一局部】

　　　　a) 全局安裝gulp

　　5．跳轉本地項目目錄

　　6．安裝package.json配置文件

　　7．安裝本地gulp

　　　　a) 本地安裝gulp+package.json配置文件（初始化項目配置）+gulpfile.js文件

　　8．安裝gulp插件

　　9．配置gulpfile.js（9,8能夠反過來，能夠js文件中須要什麼插件再裝什麼插件）

　　10．Gulp實踐流程：配置gulpfile.js文件命令，下載、調用gulp插件。

——————————————————————————————————————

　　1．node環境安裝：

Node官網下載node安裝文件：https://nodejs.org/en/

安裝方法：一直點下一步。。。。。

　　2．npm：

聽說通常狀況下，安裝好nodejs後，npm就裝好了。

這時要看一下版本號就知道了:命令行輸入——

node -v

npm -v

node -v查看安裝的nodejs版本，出現版本號，說明剛剛已正確安裝nodejs。PS：未能出現版本號，請嘗試註銷電腦重試；

npm -v查看npm的版本號，npm是在安裝nodejs時一同安裝的nodejs包管理器，

最後出現版本號就是裝上了。

　　3．cnpm

爲何要安裝cnpm？聽說npm的服務器在國外，若是咱們在國內從npm上下載文件會反應慢，並且可能會異常報錯。。裝上這個東東就快了。。。

安裝命令：

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

定位到本地目錄(你要放項目的目錄）以後再安裝局部鏡像

——局部安裝：npm install cnpm --registry=https://registry.npm.taobao.org

**裝好cnpm後，接下來你的命令中，都要寫cnpm而不是npm了。

**其實，鏡像只要裝到局部（本地目錄）就行了，畢竟全局咱們只裝一個gulp，

可是在本地目錄中卻要裝好多個用到的gulp插件，若是沒有鏡像，要等半天也是不開心的。

　　4．安裝全局gulp

全局安裝（全局安裝gulp目的是執行gulp任務）

安裝命令：cnpm install gulp -g

安裝完畢後，看一下版本號有沒有(命令行輸入：gulp -v)，就知道有沒有安裝成功了

注意：沒有裝cnpm的，這裏用npm，之後再也不贅述

　　5．定位目錄，

定位目錄：就是找到你要開始建立項目的位置，在這個位置再建一個gulp項目文件夾，之後就能夠在這裏開始工做了。

定位命令： cd+ 空格 + 目錄路徑

其餘一些周邊經常使用命令：

cd 定位到目錄，用法：cd+ 空格 + 路徑；

cd.. 返回上一級目錄

D: 定位到D盤，其餘盤同理。用法：盤符字母（大寫）加冒號

dir 列出文件列表；

mkdir newfile_name 建立新的子目錄文件夾newfile_name；

cls 清空命令提示符窗口內容。（有時候命令行好幾頁了，用它一鍵清空）

../ 也能夠返回上一級目錄

有這幾個命令就夠用了，另外別問我怎麼回到全局(後來發現個人電腦是直接按 C: 回車就能夠，不知道其餘的)，我都是點了cmd右上角的叉叉而後從新打開的。。。

小tips：用dir看清楚這個地方的全部文件，而後cd定位過去

示例：

好比我如今是在管理員目錄下

想去桌面看看：

回車

我就到了桌面了

而後想看桌面下的文件目錄

回車

就看到了這些文件列表。。。

而後我就命令行輸入 cd C:\Users\lenovo\Documents\GitHub\exe 回車

就定位到那個目錄下了

如今命令行執行的次數好多，代碼好亂，個人命令行如今已經好幾頁了咋辦？

清空命令行：cls

一樣回車

就乾淨了

至於返回上一級目錄的，實現我也不知道，就實驗了一把

看出來了吧，只有 cd ../ 起做用了

因此：命令行返回上一級目錄的命令就是 cd ../ 或者cd..

　　6．建立package.json文件——初始化項目配置

安裝命令：cnpm init（或者npm init）

Package文件裏的配置中：

項目名稱name，

項目版本version，

項目描述description

以上這三個是必須填寫的，其餘的就一直回車就ok了。

有時候，name命名會報錯，本身全英文命名就行了，儘可能別用標點符號。

還有的warn狀況是由於，你沒寫git倉庫的地址，who care。。。

最後回車完了出現這句，後邊就打Y就好。

擴展：npm install --production只下載dependencies節點的包

　　7．安裝局部gulp

安裝命令：　　cnpm install gulp --save-dev（或者npm install gulp --save-dev）【哇！哇！注意空格哇！gulp和後邊的橫線是有空格的】

特別記得這個：--save-dev：這個就是裝到局部的標誌啊，之後在局部裝插件也是少不了他的

在當前項目文件夾下安裝gulp，只要你定位到那個目錄下，就能夠在那個目錄下安裝本地gulp了。

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

而後package.json文件裏也有了「devDependencies」依賴項

　　8．配置gulpfile.js（9,8能夠反過來，能夠js文件中須要什麼插件再裝什麼插件）

在本地項目根目錄下新一個gulpfile.js文件，他是gulp項目的配置文件，不一樣於backage.json文件。

（疑問：gulpfile.js的位置，能夠隨着不一樣的項目新建不一樣的文件，而後分別放到不一樣項目的根目錄下？答案：yes）

文件內配置信息以下代碼：

var gulp = require(‘gulp’);

... ...

詳解：

var gulp = require(‘gulp’);//引入gulp組件，這一句是每個gulpfile.js裏邊所必須有的，標配！！標配！！標配！！

var sass = require(‘gulp-sass’);//導入工具包require（node-modules）裏的對應模塊，之後你須要什麼插件就對應執行這一句，不過要把變量名和括號裏的插件名字改掉。

gulp.task(‘taskName’,function(){ });//定義一個task任務，名字爲taskName：（這裏是你自定義任務名稱）、設置一個回調函數。

回調函數裏邊定義要處理的任務

任務呢就像火車同樣，一環扣一環用點鏈接，最後一個纔有分號結束。其實感受和jq的同樣，就是」鏈式調用」，在這裏呢人家叫」流式操做」

其餘gulp api的代碼意思見後邊<gulp api詳解>

另外，須要哪一個gulp插件的時能夠去網上搜這個gulp插件，而後gulpfile.js裏邊的配置網上就有了。。

　　9．安裝gulp插件

安裝命令：cnpm install 替換插件名稱 --save-dev（或者npm install 替換插件名稱 --save-dev）

這裏呢，你須要什麼gulp插件就去命令行裏裝，以gulp-sass爲例。

cnmp install gulp-sass --save-dev 或者npm install gulp-sass --save-dev

Gulp的插件不少，須要什麼就去官網查：http://gulpjs.com/plugins/

這個大神的中文總結也不錯：http://www.ydcss.com/archives/category/%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7

經常使用的也就那麼幾個，見<經常使用gulp插件集錦>。

　　10．Gulp實踐---使用gulpfile.js並調用gulp插件

gulpfile.js

一個gulpfile.js配置文件相似下邊這段代碼，他的大致結構都是差很少的，只是你用到的任務不一樣的時候，他就是不一樣的任務代碼

 1 var gulp = require('gulp');//引入gulp庫
 2 // 引入組件
 3 var jshint = require('gulp-jshint');
 4 var sass = require('gulp-sass');
 5 var concat = require('gulp-concat');
 6 var uglify = require('gulp-uglify');
 7 var rename = require('gulp-rename');
 8 //以下示例，加一個轉css的任務：
 9 // 檢查腳本，糾錯
10 //
11 gulp.task('lint', function() {
12     gulp.src('./js/*.js')
13         .pipe(jshint())
14         .pipe(jshint.reporter('default'));
15 });
16 
17 // 編譯Sass
18 gulp.task('sass', function() {
19     gulp.src('./scss/*.scss')
20         .pipe(sass().on('error',sass.logError))
21         .pipe(gulp.dest('./css'));
22 });
23 
24 // 合併，壓縮文件
25 gulp.task('scripts', function() {
26     gulp.src('./js/*.js')
27         .pipe(concat('all.js'))
28         .pipe(gulp.dest('./dist'))
29         .pipe(rename('all.min.js'))
30         .pipe(uglify())
31         .pipe(gulp.dest('./dist'));
32 });
33 //
34 //// 默認任務
35 gulp.task('default', function(){
36     gulp.run('lint', 'sass', 'scripts');
37 
38     // 監聽文件變化
39     gulp.watch('./js/*.js', function(){
40         gulp.run('lint', 'sass', 'scripts');
41     });
42 });

gulpfile.js

調用gulp插件

gulp 或者（ gulp taskName）

直接調用gulp或者輸入gulp+任務名稱

好比在上邊的gulpfile.js裏邊，我想調用sass任務，就直接在命令行輸入gulp sass

若是我想調用全部的，就輸入 gulp，命令行會自動執行default任務，並按順序執行'lint', 'sass', 'scripts'任務

　　　　3、盲區疑惑：

怎麼卸載掉gulp（全局或本地的）

再次使用gulp，就把項目放到裝好的gulp項目文件夾裏邊？不是，要重建，可是丫丫姐的項目居然均可以用，就是直接在建好的本地gulp項目中，再建一個項目包開始工做

全局環境的全局啥意思？http://www.cnblogs.com/PeunZhang/p/5629329.html

全局環境中須要package.json這個文件嗎

　　　　4、安裝過程當中的常見報錯和警告：

報錯截圖

這個狀況是提醒我graceful-fs的版本過低

其餘的報錯，很大的可能就是你命令輸入錯誤致使沒裝成功，通常就是字母輸入錯誤，空格用了全角，標點用了全角等問題

遇到了再貼圖吧。

　　　　5、能夠解決的報錯問題及方法：

一般出現的問題就是版本低。

版本低就要常常升級了：

好比我上邊graceful-fs的版本升級能夠用以下命令

npm install graceful-fs@版本號，例如：npm install graceful-fs@^4.0.0

　　　　6、經常使用命令目錄

安裝package.json(全局+本地）
定位本地目錄 cd +目錄路徑
返回上一目錄 cd..
跳轉磁盤：直接輸入盤的字母（大寫），加冒號，好比D:，就會跳轉到D盤
刪除（裝了node和rimraf的狀況下）直接rimraf +要刪除的資源名字
裝rimraf： npm install rimraf -g（或者cnpm install rimraf -g若是你換了鏡像的話）

　　　　7、gulp api 詳解

（說句人話就是gulpfile.js文件代碼解讀）

一個gulp-sass任務的案例：

// 編譯Sass

1 gulp.task('sass', function() { 2 
3     gulp.src('./scss/*.scss') 4 
5 .pipe(sass()) 6 
7         .pipe(gulp.dest('./css')); 8 
9 });

1．關於gulp task

//理解了gulp的task，就理解了gulp，其核心就是task。

//他只構建一個執行的框架，而無論你要執行的內容，只管排隊和到達，無論交通方式和運輸的人員身份。

//定義第一個任務，每個任務都要經過task來定義

//my task 1是task的名字，就像上邊的代碼案例裏，sass就是task的名字。function回調函數裏是要執行的具體內容

1 gulp task('my task 1',function(){ 2 console.log("my task 1").console.log("task ok");//這麼寫兩個console.log是不對的，可是爲了演示鏈式操做 3 
4 });

my task 1 示例

//gulp流式操做就至關於jq的鏈式調用,這裏只是一個示例，

//定義第二個任務

1 gulp task('my task 2',function(){ 2 console.log("my task 3"); 3 });

第二個task示例

//最後，你須要哪一個task，你就在命令行敲入 gulp taskName就能夠調用了。

也能夠。。

//定義默認執行的任務task

1 gulp.task('default',['my task 1','my task 2'],function(){ 2 console.log('ok'); 3 });

默認的task

//方括號[]內是定義任務的順序，是一個數組，能夠爲空，爲空就表示不依賴任何其餘task任務，須要單獨執行任務，不爲空的話任務就會被按順序執行出來。

所謂的默認任務:

他只有惟一的名字就是default

也就是說，只要你有一個任務定義了名字是default，那麼你直接運行gulp或者gulp+任務名（好比這裏用gulp sass）的方式運行，他都會率先執行你default任務下的回調函數。

一樣的，若是你default任務的task參數裏邊，有方括號設定其餘依賴任務的順序，那麼他執行完default任務的回調函數後，會按照你指定的方括號裏的任務名字順序來執行。

//——————這裏有一個小技巧，就是若是你的gulpfile文件裏有好多task，你能夠定義一個default，而後default後邊依賴一下其餘的須要執行的task，並按照順序排列。

//而後在命令行裏直接執行gulp，不用填寫執行的任務名字，他就能夠自動執行默認的task，而後轉向指定的其餘依賴的task了、。

//能夠比喻成你設置一條流水線做業吧。而後機器按照你的設定自動完成。

　　　　8、gulp經常使用插件集錦

livereload插件，他須要安裝一個

liveReload谷歌瀏覽器（chrome）插件2.1：http://www.cnplugins.com/devtool/livereload/download.html

這個插件下載地址：安裝方法：http://www.cnplugins.com/tools/how-to-setup-crx.html

一個吊炸天的插件，多個瀏覽器實時測試：http://www.browsersync.cn

 1 var gulp = require('gulp');
 2 var sass = require('gulp-sass');
 3 //var livereload = require('gulp-livereload');
 4 var browserSync = require('browser-sync').create();
 5 var reload = browserSync.reload;
 6 //default
 7 gulp.task('default',["browser-sync"],function(){
 8     console.log("this is a test and you are successful!!!")
 9 })
10 // 靜態服務器
11 gulp.task('browser-sync', function() {
12     browserSync.init({
13         server: "./"
14     });
15     //這段代碼是說，創建一個叫browser-sync的任務，而後讓他初始化，設置服務器的基本目錄在當前目錄
16     gulp.watch('scss/*.scss', ['sass']);
17     gulp.watch("*.html").on('change', reload);
18 });
19 
20 //編譯sass。css將注入到瀏覽器裏實現更新
21 gulp.task('sass', function() {
22     gulp.src("scss/*.scss")
23         .pipe(sass().on('error',sass.logError))
24         .pipe(gulp.dest("./css"))
25         .pipe(reload({stream: true}));
26 });

browserSync的應用

http://www.cnblogs.com/kelsen/p/4643762.html

http://www.open-open.com/lib/view/open1426232157888.html

http://www.cnblogs.com/2050/p/4198792.html#part4

比較經典的：

Gulp監聽：http://www.ydcss.com/archives/34

Gulp自動加載：http://www.cnblogs.com/yuzhongwusan/p/5417074.html http://www.ydcss.com/archives/702

Gulp自動加載和gulp-sass合用：http://blog.csdn.net/qq_33236453/article/details/51234775

　　　　9、gulp經常使用地址：

gulp官方網址：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

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

gulp 中文API：http://www.ydcss.com/archives/424

　　　　10、參考文章：

Gulp入門教程：http://www.ydcss.com/archives/18

Gulp教程之gulp-less：http://www.ydcss.com/archives/34

1 -------------------------------------------------------------------------------------正經分割線！！！--------------------------------------------------------------------------------------------------------------------------
2 
3 聲明：
4 
5 　　請尊重博客園原創精神，轉載或使用圖片請註明：
6 
7 　　博主：xing.org1^
8 
9 　　出處：http://www.cnblogs.com/padding1015/