glup命令

㈠ gulp壓縮合並css/js時，怎麼自動修改引用壓縮後的css/js的路徑

記錄一下用 gulp 來合並、壓縮CSS以及進行 MD5命名以及替換文件中引入的CSS文件，當然這一系列操作都是用基於gulp插件的，主要會用到下面的幾個插件：
var concat = require('gulp-concat');//- 多個文件合並為一個；var minifyCss = require('gulp-minify-css');//- 壓縮CSS為一行； var rev = require('gulp-rev');//- 對文件名加MD5後綴var revCollector = require('gulp-rev-collector');//- 路徑替換

安裝Gulp插件到本地項目
npm init//- 生成一個 package.json，裡面是一些常規的配置信息npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev//- 安裝插件到項目目錄內

完成上面兩步後，會在我們的項目內生成一個package.json文件以及一個node_moles目錄
創建配置文件 gulpfile.js
在項目根目錄內創建一個 gulpfile.js 文件(必須是這個文件名喲~)，內容就是上面幾個插件的配置信息：
var gulp = require('gulp');var concat = require('gulp-concat'); //- 多個文件合並為一個；var minifyCss = require('gulp-minify-css'); //- 壓縮CSS為一行；var rev = require('gulp-rev'); //- 對文件名加MD5後綴var revCollector = require('gulp-rev-collector'); //- 路徑替換gulp.task('concat', function() { //- 創建一個名為 concat 的 task
gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css']) //- 需要處理的css文件，放到一個字元串數組里
.pipe(concat('wap.min.css')) //- 合並後的文件名
.pipe(minifyCss()) //- 壓縮處理成一行
.pipe(rev()) //- 文件名加MD5後綴
.pipe(gulp.dest('./css')) //- 輸出文件本地
.pipe(rev.manifest()) //- 生成一個rev-manifest.json
.pipe(gulp.dest('./rev')); //- 將 rev-manifest.json 保存到 rev 目錄內});

gulp.task('rev', function() {
gulp.src(['./rev/*.json', './application/**/header.php']) //- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
.pipe(revCollector()) //- 執行文件內css名的替換
.pipe(gulp.dest('./application/')); //- 替換後的文件輸出的目錄});

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

運行結果
通過以上的配置之後，就可以開始運行 gulp 對我們的項目進行相關的操作啦；
使用 gulp 命令，運行Gulp.js 構建程序
首先運行 concat 這個 task 生成一個 rev-manifest.json 文件
然後再運行 rev 這個 task 替換掉文件中引入的 css
YuanWingdeMacBook-Pro:m YuanWing$ gulp concat
[11:47:02] Using gulpfile ~/SVN/JKD/m/gulpfile.js
[11:47:03] Starting 'concat'...
[11:47:03] Finished 'concat' after 12 msYuanWingdeMacBook-Pro:m YuanWing$ gulp rev
[11:47:17] Using gulpfile ~/SVN/JKD/m/gulpfile.js
[11:47:17] Starting 'rev'...
[11:47:17] Finished 'rev' after 10 msYuanWingdeMacBook-Pro:m YuanWing$

rev-manifest.json文件內容：
{ "wap.min.css": "wap.min-c49f62a273.css"}

header.php替換前後對比：
替換前：<link rel="stylesheet" href="/css/wap.min.css" />
替換後：<link rel="stylesheet" href="/css/wap.min-c49f62a273.css" />
gulp-rev-collector進行文件路徑替換是依據 rev-manifest.json 的，所以要先成生 .json 文件，然後再進行替換；

㈡ 執行gulp命令報錯，怎麼辦

uglify解析時出錯了，看下問題出在哪兒
.pipe(uglify().on('error', function(e) {
console.log(e);
})

㈢ 如何使用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，當修改文件的時候終端會發生變化；

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

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

㈤ 怎麼用gulp壓縮js和css文件

/步驟
首先要確保pc裝nodeglobal環境項目文件都install gulp
npm install gulp -g (global環境)
npm install gulp --save-dev (項目環境)

項目install需要gulp插件般壓縮需要
npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev
更插件鏈接找
項目根目錄新建gulpfile.jsrequire需要mole
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
del = require('del');
壓縮css
gulp.task('minifycss', function() {
return gulp.src('src/*.css') //壓縮文件
.pipe(gulp.dest('minified/css')) //輸文件夾
.pipe(minifycss()); //執行壓縮
});
壓縮js
gulp.task('minifyjs', function() {
return gulp.src('src/*.js')
.pipe(concat('main.js')) //合並所jsmain.js
.pipe(gulp.dest('minified/js')) //輸main.js文件夾
.pipe(rename({suffix: '.min'})) //rename壓縮文件名
.pipe(uglify()) //壓縮
.pipe(gulp.dest('minified/js')); //輸
});
執行壓縮前先刪除文件夾內容
gulp.task('clean', function(cb) {
del(['minified/css', 'minified/js'], cb)
});
默認命令cmd輸入gulp執行命令
gulp.task('default', ['clean'], function() {
gulp.start('minifycss', 'minifyjs');
});

要cmd執行gulp即

㈥ gulp怎麼替換html中的資源路徑.並把html輸出到指定目錄

創建一個空文件夾名字任意，此項目為angular-gulp-seed

mkdir angular-gulp-seed

初始化工程

npm init

創建項目基本目錄結構如下：

+src
+app // 業務模塊
-app.js // 應用入口
+demo // 業務模塊目錄，所有子模塊均遵循此目錄
- mole.js // 模塊聲明文件
- controller.js // vm層
- index.html // 主入口模板
- router.js // 模塊路由文件
- style.css // 模塊樣式
+home
+assets // 靜態資源目錄
-images
-css
+common // 公共服務
+components // 公共組件
+scripts // gulp腳本
- gulp.build.js // build任務
- gulp.common.js // dev,build公共任務
- gulp.config.js // 基礎配置
- gulp.dev.js // dev任務
index.html // 主頁面package.json

正式開始coding

gulp配置部分

1.安裝gulp
npm install gulp -D
2.新建gulpfile文件，安裝browser-sync包，配置第一個任務
var browserSync = require('browser-sync');
gulp.task('browserSync', function () {
browserSync({ server: { baseDir: './', index: 'src/index.html'
}
});
});
gulp.task('default', ['browserSync']);// 執行gulp命令，瀏覽器啟動，可以看到大致頁面結構

3.為了動態插入新加的js和css文件,且添加的文件有一定順序，安裝gulp系列包。
npm install gulp-watch gulp-inject gulp-order -D
4. 新建一個gulp.config.js文件,配置一些基本文件路徑和順序
mole.exports = function () { var src = './src/'; var build = './dist/'; var config = { src: src, build: build, index: src + 'index.html', css: [src + '**/*.css'], appJs: [src + 'app/**/*.js'], commonJs: [src + 'common/**/*.js'], componentJs: [src + 'components/**/*.js'], jsOrder: [ '**/app.js', // 項目主入口
'**/app.*.js', // 主入口相應配置
'**/mole.js', // 模塊聲明
'**/router.js', // 模塊路由
'**/index.js', // 組件、resource入口
'**/*.js' // 其他
], cssOrder: [ '**/app.css', // 項目主模塊
'**/*.mole.css', // 業務子模塊
'**/*.css' // 其他
]
} return config;
}();
5.使用gulp-inject動態插入css和js

• js任務編寫

• var config = require('./gulp.conf.js');


• gulp.task('inject', function() { var js = gulp.src(config.js, {read: false}).pipe(order(config.jsOrder)); var css = gulp.src(config.css, {read: false}).pipe(order(config.cssOrder)); return gulp


• .src(config.index)


• .pipe(inject(js, {addPrefix: '../src', relative: true}))


• .pipe(inject(css, {addPrefix: '../src', relative: true}))


• .pipe(gulp.dest(config.src))


• .pipe(browserSync.reload({stream: true}));


• });



• 頁面添加inject標識

• <!-- css -- >


• <!-- inject:css --><!-- endinject --><!-- js -- >


• <!-- inject:js --><!-- endinject -->



• 添加到default任務中

• gulp.task('default', ['inject','browserSync']);



• 執行gulp命令，可看到如圖頁面效果,同時index.html頁面內容發生變化

• <!-- inject:css --><link rel="stylesheet" href="../src/assets/css/app.css"><!-- endinject --><!-- inject:js --><script src="../src/app/app.js"></script><!-- endinject -->


• 6. 開發過程中會不斷添加新的css和js文件，為了優化開發體驗，引入gulp-watch包添加watch任務，當js和css文件發生變化的時候，去執行inject任務


• var watch = require('gulp-watch');


• gulp.task('watch', function() {


• watch('src/**/*.js', function() {


• gulp.run('inject');


• });


• watch('src/**/*.css', function() {


• gulp.run('inject');


• });


• });


• gulp.task('default', ['inject', 'browserSync', 'watch']);



編寫業務代碼

• 1.安裝angular相關包


• npm install angular angular-ui-router --save


• 2.由於代碼量過大，不貼出具體參見src/spp下面代碼實現



• src/index.html

• src/app.js 項目主入口

• src/app.router.js 項目路由配置

mock數據服務

為了前端保持獨立，使用express搭建一個mock服務，然後我們就能愉快的開始開發了。

• 1.首先安裝依賴包：


• npm install express body-parser json-server http-proxy-middleware -D


• 2.創建server.js，內容如下：


• var jsonServer = require('json-server');var server = jsonServer.create();var middlewares = jsonServer.defaults();var bodyParser = require('body-parser');var mockRouter = require('./mock/index');// 添加默認的中間件 logger, static, cors and no-cacheserver.use(middlewares);// 解析 bodyserver.use(bodyParser.json());


• server.use(bodyParser.urlencoded({ extended: false}));



• server.use(mockRouter);



• server.listen(4000, function() { console.log('God bless me no bug, http://localhost:4000');


• });


• 3. mock文件夾下創建index.js,內容如下：


• var fs = require('fs');var express = require ('express');var router = express.Router();



• fs.readdirSync('mock').forEach(function(route) { if (route.indexOf('index') === -1) { require('./' + route)(router);


• }


• });mole.exports = router;


• 4.引入angular-resource.js，使用$resource服務


• npm install angular-resource --save



在common/resource/創建一個utils,具體文件為resourceUtils，為所有請求添加統一前綴

• (function() {


• angular


• .mole('app.resource')


• .factory('resourceUtils', resourceUtils)


• .factory('webResource', webResource);



• resourceUtils.$inject = ['$resource']; function resourceUtils($resource) { return function(apiPrefix) { return function(url, params, actions) { return $resource(apiPrefix + url, params, actions);


• };


• };


• }



• webResource.$inject = ['resourceUtils']; function webResource(resourceUtils) { // 其中***為後端服務的統一前綴


• return resourceUtils('/***/');


• }



• })();


• 5. 在gulpfile.js中統一配置代理，並且修改browserSync任務：


• // 引入http-proxy-middlewarevar proxyMiddleware = require('http-proxy-middleware');// 配置代理路徑,是否為本地mockvar isLocal = true;var target = '';if (isLocal) {


• target = 'http://localhost:4000';


• } else { // API address}// browserSync任務添加代理gulp.task('browserSync', function() { var middleware = proxyMiddleware(['/***/'], {target: target, changeOrigin: true});


• browserSync({ server: { baseDir: './', index: 'src/index.html', middleware: middleware


• }


• });


• });


• 6. 你可能需要添加一些公共的interceptor去處理後端返回的數據或者請求出錯的統一處




至此已經可以在本地愉快的開發了。

配置gulp編譯任務

開發完成以後代碼需要build上線，繼續創建一些task。

• 1.安裝相關依賴包


• npm install gulp-angular-templatecache gulp-minify-css gulp-if gulp-useref gulp-uglify gulp-replace -D


• 2. 配置build任務，具體在scripts/gulp.build.js文件中.3. 頁面html遇到build的地方配置


• ... <!-- build:css css/app.css -->


• <!-- endbuild -->




• <!-- build:js js/common.js -->


• <!-- endbuild -->


• ...



我將gulp的任務全部獨立出去管理，這樣使得gulpfile.js更加清晰

• var gulp = require('gulp');var del = require('del');var runSequence = require('run-sequence');var config = require('./scripts/gulp.conf.js');var buildTask = require('./scripts/gulp.build.js');var devTask = require('./scripts/gulp.dev.js');var commonTask = require('./scripts/gulp.common.js');// 動態添加css和js到index.htmlgulp.task('inject', function() {


• commonTask.inject();


• });// 添加監聽任務gulp.task('watch', function() {


• devTask.watch();


• });// 使用browerSync啟動瀏覽器gulp.task('browserSync', function() {


• devTask.browserSync();


• });// 清除dist文件gulp.task('clean', function() {


• del(config.build);


• });// 打包組件模板gulp.task('build:components-templates', function() {


• buildTask.componentsTemplate();


• });// 打包業務模板gulp.task('build:app-templates', function () {


• buildTask.appTemplate();


• });// build index文件gulp.task('build', ['build:components-templates', 'build:app-templates'], function() {


• buildTask.buildIndex();


• });// 本地開發gulp.task('default', ['inject', 'browserSync', 'watch']);// 線上環境打包gulp.task('dist', ['clean'], function() {


• runSequence('inject', 'build');


• });



在package.json中配置腳本

• "scripts": { "start": "concurrently "gulp" "node server.js""


• }



• 執行npm start即可本地啟動項目

• 上線合並代碼的時候執行gulp dist命令即可

拖延症晚期，終於寫完了。有時間會加入eslint校驗,添加md5，添加sass等等。。。需要做的還有很多，看心情吧！

㈦ 如何在linux下安裝gulp

npm-ginstallgulp

sudonpminstall-ggulp

npminstallgulp

㈧ gulp 怎麼將es6轉為es3

gulp在3.9版本裡面增加了對babel的支持，因此我們可以直接在gulpfile裡面使用ES6(ES2015)了。

升級gulp版本

首先要檢測一下我們的gulp版本，確保CLI版本及Local版本都在3.9之上:
gulp -v

版本如下：
CLI version 3.9.0
Local version 3.9.0

若版本過低，我們可以通過以下方式進行升級，這里將同時升級CLI版本和Local版本：
npm install gulp -g && npm install gulp --save-dev

安裝babel

我們需要安裝babel-core及babel-preset-es2015來轉換ES6代碼：
npm install babel-core babel-preset-es2015 --save-dev

然後，創建一個.babelrc文件來使用es2015 preset：
touch .babelrc

寫入如下內容：
{
"presets": ["es2015"]
}

接下來就是使用ES6語法重寫gulpfile了。

使用ES6語法重寫gulpfile

首先，重命名gulpfile.js為gulpfile.babel.js，這樣gulp執行前會自動調用babel轉換文件。
mv gulpfile.js gulpfile.babel.js

然後在gulpfile.babel.js裡面用ES6語法寫些內容，如下：
'use strict';

import gulp from 'gulp';
import less from 'gulp-less';

const paths = {
less: 'less/',
dest: 'build/'
};

gulp.task('less', () => {
gulp.src(`${paths.less}**/*.less`)
.pipe(less())
.pipe(gulp.dest(`${paths.dest}css/`));
});

然後執行gulp命令：
gulp less

這里和原來一樣，以前的命令怎麼用現在還是怎麼用!

GitHub源碼：using-es6-with-gulp

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

npm-ginstallgulp

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

sudonpminstall-ggulp

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

npminstallgulp

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

㈩ 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