gulp不是內部命令

⑴ nodejs裝gulp的時候這個樣，為什麼

1、安裝nodejs
1.1、說明：gulp是基於nodejs，理所當然需要安裝nodejs；
1.2、安裝：打開nodejs官網，點擊碩大的綠色Download按鈕，它會根據系統信息選擇對應版本（.msi文件）。然後像安裝QQ一樣安裝它就可以了（安裝路徑隨意）。
2、使用命令行（如果你熟悉命令行，可以直接跳到第3步）
2.1、說明：什麼是命令行？命令行在OSX是終端（Terminal），在windows是命令提示符（Command Prompt）；
2.2、註：之後操作都是在windows系統下；
2.3、簡單介紹gulp在使用過程中常用命令，打開命令提示符執行下列命令（打開方式：window + r 輸入cmd回車）：
node -v查看安裝的nodejs版本，出現版本號，說明剛剛已正確安裝nodejs。PS：未能出現版本號，請嘗試注銷電腦重試；
npm -v查看npm的版本號，npm是在安裝nodejs時一同安裝的nodejs包管理器，那它有什麼用呢？稍後解釋；
cd定位到目錄，用法：cd + 路徑 ；
dir列出文件列表；
cls清空命令提示符窗口內容。

⑵ gulp在項目中怎麼使用

1. 安裝node.js-->http://www.runoob.com/nodejs/nodejs-install-setup.html

2. 安裝gulp

• 【使用npm-->NPM是隨同NodeJS一起安裝的包管理工具】

• cmd進入到需要安裝npm的目錄 使用命令【本地和全局都需要安裝】

• npm install gulp 本地安裝

• npm install gulp -g 全局安裝

3.npm init --yes 命令生成package.json

4.安裝需要的模塊【例如：npm install gulp-less --save-dev】

5.新建gulpfile.js文件-->

• a）載入模塊require

• b）定義任務gulp.task

• c） 定義默認任務

• d）啟動監聽更新

• e）處理異常不終止watch任務（命令gulp-plumber）

• 【詳情如下】
  

6.【命令行】編譯默認任務-->gulp

編譯指定任務-->【gulp <name>】-->例如：gulp less

⑶ 全局方式安裝gulp是什麼意思

npm-ginstallgulp

如果是 linux 或者 Mac，你可能需要在前面加 sudo

sudonpminstall-ggulp

上面的命令中個，-g 代表全局安裝，安裝之後你可以直接在終端執行 gulp 命令。

npminstallgulp

如果不實用 -g 參數，gulp 會被裝在當前目錄下的 node_moles 目錄中，不能直接通過 gulp 命令使用，需要你手動改環境變數。

⑷ gulp最新的gulp-uglify插件用了pump，這個怎麼用，老是報錯

這里並不講什麼 gulp 及其其插件的安裝，此前的文章已經提到過了。這里主要用來記錄一下，gulp構建工具的一些簡單常用的用法。
最有用的Gulp插件匯總
1）假如我們想使用gulp壓縮js文件並合並js文件，應如何操作呢看
使用gulp-uglify和gulp-concat插件，gulpfile.js 大致如下：
/**
* Created by DreamBoy on 2016/8/19.
*/
var gulp = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('concat', function() {
// 你的默認的任務代碼放在這
gulp.src('./src/*.js')
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./build'));
});

gulp.task('default', ['concat']);

// 在命令行中運行 gulp
/*
默認的名為default的任務（task）將會被運行，在這里，這個任務並未做任何事情。
想要單獨執行特定的任務（task），請輸入gulp <task> <othertask>。
*/
更加詳細的用法可以參考：gulp教程之gulp-uglify

⑸ 執行gulp命令時報錯，怎麼回事

mole.js:327
throw err;
^

Error: Cannot find mole 'gulp-jshint'
at Function.Mole._resolveFilename (mole.js:325:15)
at Function.Mole._load (mole.js:276:25)
at Mole.require (mole.js:353:17)
at require (internal/mole.js:12:17)
at Object.<anonymous> (C:\Users\Administrator\Desktop\gulp\gulpfile.js:5:14)

at Mole._compile (mole.js:409:26)
at Object.Mole._extensions..js (mole.js:416:10)
at Mole.load (mole.js:343:32)
at Function.Mole._load (mole.js:300:12)
at Mole.require (mole.js:353:17)
at require (internal/mole.js:12:17)

這是怎麼回事呢？？

⑹ 如何在linux下安裝gulp

npm-ginstallgulp

sudonpminstall-ggulp

npminstallgulp

⑺ 如何結合Gulp使用PostCss

PostCSS 現在已經普及了一段時間，如果您還沒有使用過它或不知道PostCSS是什麼，那麼我建議您看看這篇 PostCSS簡介 ，該文章介紹了PostCSS的基礎知識，包括如何安裝和使用一些PostCSS插件。

在本教程中，我將向您展示如何結合Gulp使用PostCSS，一個流行的自動化工具。由於這篇文章不是一個關於Gulp的入門教程，所以我不會涵蓋 Gulp 的基礎知識。但為了快速入門，您可以看看這篇 Gulp.js簡介 。

1.項目設置

在開始本教程之前，你應該創建一個項目文件夾用來工作。該文件夾內應該已經安裝了Gulp以及兩個內部文件夾，名稱分別為「initial」和「final」（或您選擇的其它名稱）。所謂的「initial」的文件夾將存放你的原材料和未加工的CSS代碼。 「initial」文件夾將存放處理過的文件，隨時可以使用。

在繼續之前，在您的項目文件夾中打開使用終端，運行以下命令：

npm install gulp-postcss --save-dev

PS：--save-dev補充：表示將正在安裝的插件作為依賴添加到project.json文件里。這將對多人合作模式有很大的幫助。當其他開發人員運行 npm install 在軟體包安裝命令，所有的插件將被自動安裝。

此時你的文件夾結構應該是：

initial —您的原始CSS文件的文件夾。

style.css —未處理的css樣式，我們將在稍後進行編輯。

final — 處理過的css文件的文件夾

node_moles — 所有NPM模塊的文件夾

gulp — 當你安裝Gulp時創建的文件夾

gulp-postcss —運行上面的命令後創建的文件夾。

guplfile.js —你的 Gulp文件

package.json —你的 package.json 文件

2.安裝插件

開始之前，我們先安裝一些基本的插件。我們將要使用的插件是 short-color （一個顏色插件）.這個插件基本上擴展了現有的顏色屬性，並且可以設置第二個顏色值(將會被作為背景顏色)。運行以下命令來安裝 short-color。

npm install postcss-short-color --save-dev

你還可以同時安裝使用gulp-postcss和postcss-short-color ：

npm install gulp-postcss postcss-short-color --save-dev

這兩個插件安裝完畢後，你需要打開並編輯gulpfile.js文件，這樣就可以開始使用該插件工作。我們首先通過以下代碼來啟用這兩個插件：
var gulp = require('gulp');

var postcss = require('gulp-postcss');

var shortColor = require('postcss-short-color');

現在，讓我們建立一個gulp任務來處理我們的原始的CSS文件，並創建一個准備就緒的樣式表。下面是代碼這樣做：
gulp.task('css', function () {
return gulp.src('initial/*.css')
.pipe(postcss([shortColor]))
.pipe(gulp.dest('final'));
});

我首先創建一個名為CSS的任務。當你要運行相應的功能時可以用到這個名字。您可以在gulp.src()內部指定要處理的文件。使用*的CSS將處理「intial」文件夾內所有的CSS文件。

接下來，我們使用pipe()函數來調用我們的所有插件。要做到這一點，我們需要將所有的插件作為參數傳遞給postcss()函數。在我們的基本的例子中，我們實際上只有一個插件需要傳遞。
在下一節，我會告訴你如何傳遞多個插件。插件通過管道後，gulp.dest()將被用於設置處理的文件的目的地。

為了測試，如果一切已正確設置，在「initial」文件夾內創建一個style.css文件。 style.css文件將有以下的CSS：
section {
color: white black;
}

接下來，你需要在你的終端里運行 gulp css 命令。此刻，在您的「final」文件夾內，你應該會看到一個style.css文件，像下面的CSS 一樣：
section {
color: white;
background-color: black;
}

如果您CSS的樣式和上面所展示的CSS樣式一樣的話，我們就可以認為一切工作正常。

3.安裝多個插件

只使用一個基本的插件並不能從根本上減輕你的工作量。PostCSS有很多令人印象深刻的且令人難以置信的有用的插件，所以在大多數情況下，你需要使用到的插件不止一個。在本節中，我將告訴你如何在工作中同時使用多個插件。

您可能會發現有三個PostCSS插件（包）是非常有用的：即 short , cssnext 和 autoprefixer

short將使你少寫並且速記大量的CSS屬性。 例如:

.heading {
font-size: 1.25em 2;
}

將會被解析成：

.heading {
font-size: 1.25em;
line-height: 2;
}

cssnext能夠在你的css樣式表中，使用最新的CSS語法。例如，下面的CSS：

.link {
color: color(green alpha(-10%));
}

將被轉換為：

.link {
background: rgba(0, 255, 0, 0.9);
}

最後，autoprefixer將會在您的CSS和轉換後的樣式文件中添加供應商前綴：

img {
filter: grayscale(0.9);
}

轉換為：

img {
-webkit-filter: grayscale(0.9);
filter: grayscale(0.9);
}

現在讓我們看看如何安裝這些插件，然後用它們來改造我們的樣式表。在項目目錄下運行下面的命令：

npm install autoprefixer postcss-short postcss-cssnext --save-dev

我們需要修改我們的gulp task來包含所有這些插件，代替用管道將所有這些插件一個一個的傳遞，我們將它們存儲在易於維護和簡潔的陣列。下面是我們的gulpfile.js的代碼：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('postcss-cssnext');
var shortcss = require('postcss-short');
gulp.task('css', function() {
var plugins = [
shortcss,
cssnext,
autoprefixer({browsers: ['> 1%'], cascade: false})
];
return gulp.src('initial/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('final'));
});

您可能已經注意到了，我已經指定了Autoprefixer插件的一些選項。Autoprefixer輸出這些選項確定的CSS，在這種情況下，我說的是插件支持所有全球使用量超過1％的瀏覽器。我也被禁用級聯，讓所有的前綴和不帶前綴屬性左對齊。類似的選項也可用於大多數其他插件。

為了測試，如果一切正常，將出在樣式表下面的CSS：

.prefix-filter {
display: flex;
}

.cssshort-section {
text: #333 bold justify uppercase 1.25em 1.7 .05em;
}
.cssnext-link {
color: color(blue alpha(-10%));
}
.cssnext-link:hover {
color: color(orange blackness(80%));
}

如果現在在終端中運行gulp css，你應該在「final」文件夾中可以得到style.css，如下：

.prefix-filter {
display: -webkit-box;
display: flex;
}

.cssshort-section {
color: #333;
font-weight: 700;
text-align: justify;
text-transform: uppercase;
font-size: 1.25em;
line-height: 1.7;
letter-spacing: .05em;
}

.cssnext-link {
color: #0000ff;
color: rgba(0, 0, 255, 0.9);
}

.cssnext-link:hover {
color: rgb(51, 33, 0);
}

4.插件的執行順序

在最後一節的例子很清楚說明了PostCSS的實用性。所有PostCSS的力量在於它的插件。

我們具體來研究兩個插件 rgba-fallback 和 color-function ， rgba-fallback 插件會轉換一個RGBA顏色為16進制格式，color-function將改變CSS的color()函數來兼容更多菜單CSS，比方說，你有一下的CSS：

body {
background: color(orange a(90%));
}

如果你運行的顏色功能插件之前的RGBA-後備插件，就像這樣：

var plugins = [
rgbafallback,
colorfunction
];

你將得到下面的CSS:

body {
background: rgba(255, 165, 0, 0.9);
}

正如你所看到的，在處理CSS時沒有RGBA回退。這樣的異常原因是回退插件運行時，它發現背景是color(orange a(90%))，並且不知道該怎麼辦。後來，color函數插件執行，並從原來的color函數創建RGBA顏色值。

如果你扭轉插件順序，按以下順序運行它們：

var plugins = [
colorfunction,
rgbafallback
];

最後的CSS是這樣的：
body {
background: #ffa500;
background: rgba(255, 165, 0, 0.9)
}

這一次的顏色插件首先把背景色的RGBA值和後備插件層增加一個十六進制回退。

總結

在本教程中我已經介紹了使用gulp和PostCSS一起使用的基本知識。隨著插件和gulp的正確組合，可以節省開發的許多時間和避免不必要的麻煩。如果您有任何技術問題或建議,請盡管在本教程的下面進行評論，以便於我們能更好的學習交流。
資料由：成都點點通軟體開發公司提供！

⑻ gulp不是內部或外部命令，也不是可運行的程序 或批處理文件.怎麼解決

javac不是內部或外部命令，也不是可運行的程序或批處理文件解決辦法： 1.安裝jdk,安裝方法：在官網下載好jdk之後，雙擊安裝包，進入安裝即可； 2.配置環境變數： a.JAVA_HOME:jdk安裝目錄 b.CLASSPATH:.;%JAVA_HOME%\lib」 c.PATH:%JAVA_HOME%\bin 配置環境變數方法： 1.點擊計算機，右鍵彈出菜單，選擇屬性； 2.進入屬性之後，選擇高級系統設置； 3.點擊環境變數，然後依次添加環境變數已經變數值即可。

⑼ 輸入gulp 命令時怎麼提示是外部命令

ABD根本就不是個系統命令所以你輸入的時候無法識別既然不要原理我就不多說了解決法先輸入c:\windows\system32\cmd.exec:\windows\system32\abd.exe再輸入abd他就不會提示了這個就是解決法

⑽ 如何使用gulp解決內核前綴問題

檢查你的 node 版本和 gulp 版本
1、如果沒有安裝node可以參考我的《CentOS 7下手把手搭建hexo博客》中使用nvm來管理node；
2、如果沒有安裝gulp可以使用npm install --global gulp全局安裝 gulp；
3、檢查你的 node 版本和 gulp 版本；
$ node -vv5.0.0$ gulp -v[19:21:35] CLI version 3.9.0[19:21:35] Local version 3.9.0

初始化項目目錄
使用 npm init 創建一個 package.json 存儲依賴關系等配置信息，推薦使用，如圖給出一個例子；；
創建 gulp 的配置文件 gulpfile.js，開始很簡單，如圖：
使用git init 創建版本庫，並簡單配置，如果不熟悉git操作可以去官網先看看;

測試gulp命令
$gulp
如圖所示一切ok，現在沒有任務；

安裝依賴插件
$ npm install --save-dev gulp-autoprefixer browser-sync gulp-notify
其中：

gulp-autoprefixer 根據瀏覽器版本自動處理添加瀏覽器前綴

browser-sync 能讓瀏覽器實時、快速響應文件更改（html、js、css、sass、less等）並自動刷新頁面

gulp-notify 用於任務提醒
安裝過程比較長慢慢等待，不過一定要確認安裝成功；

安裝成功之後package.json會保存插件，當前目錄下會創建目錄node_moles保存安裝的插件；

5
以 browser-sync 為例來配置 gulpfile.js 文件
1、修改gulpfile.js如圖所示：
2、創建源碼目錄src；
3、終端運行gulp，當修改文件的時候終端會發生變化；