A. 用gulp壓縮angurlar程序可以嗎
gulp.task('uglify', function () {
gulp.src(['js/*.js']) //這里如果是 有很多js文件 ['js/*.js']
.pipe(uglify())
.pipe(rename({suffix: '.min'})) // 上面如果是 ['js/*.js'],要把所有的文件都添加.min.js後綴
.pipe(gulp.dest('js'));
});
B. gulp執行壓縮時很慢怎麼實現
1、在任務管理器中(ctrl+alt+delete),選性能,看卡住的時候哪些程序內存佔用過多,cpu使用率過高,內存過多的話,上網查一下是什麼進程,可結束的就結束程序。cpu過高,可試試換操作系統。還可在事件查看器中看系統經常報什麼錯,看能否找出問題。2、W7系統,可下載W7優化大師,優化一下。W8系統有W8優化大師,XP有優化大師。3、W7、W8:開始-運行(輸入msconfig)-回車-引導---高級選項---勾選"處理器個數",選擇最大核心數--勾選"最大內存"--確定。回到系統配置窗口-啟動,保留殺毒軟體和輸入法,其它的全部禁用。4、用金山或者360衛士,在優化系統中打開開機加速,關閉一些你不需要開機啟動的進程。5、進行磁碟碎片整理和磁碟清理。注意:W7不能壓縮C盤來增大空間,否則無法啟動。
C. 為什麼用gulp壓縮js文件,有些文件壓縮不了
方法: 1。 改表法。可能是你的帳號不允許從遠程登陸,只能在localhost。這個時候只要在localhost的那台電腦,登入mysql後,更改 "mysql" 資料庫里的 "user" 表裡的 "host" 項,從"localhost"改稱"%" mysql -u root -pvmwaremysql>use mysql;mysql>update user set host = '%' where user = 'root';mysql>select host, user from user; 2. 授權法。例如,你想myuser使用mypassword從任何主機連接到mysql伺服器的話。
D. gulp img 壓縮難道就他媽的沒有效率高一點的插件了嗎
不引用外部的靜態資源文件,而直接通過<style>或<script>寫入的css與js,一般叫做inline resources。
用gulp inline作為關鍵字搜索,就可以找到gulp-inline-source和gulp-inline。
E. gulp怎麼壓縮html js css 混合的文件
合並和壓縮JS、CSS文件
壓縮JS,CSS文件需要引用如下組件:
gulp-minify-css: 壓縮css
gulp-jshint: 檢查js
gulp-uglify: 壓縮js
gulp-concat: 合並文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夾
gulp-notify:提示
安裝組件項目目錄,通過cd 進入項目的根目錄,執行下邊的npm安裝組件
npm install gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev
F. 如何使用Gulp裁剪和壓縮圖片
我試了一下,勾選 應用於所選圖片 才可以
G. gulp contra 構建工具需要裝什麼軟體
npm install gulp --save-dev 什麼是gulp? gulp是新一代的前端項目構建工具,你可以使用gulp及其插件對你的項目代碼(less,sass)進行編譯,還可以壓縮你的js和css代碼,甚至壓縮你的圖片,gulp僅有少量的API,所以非常容易學習。 gulp 使用 stream 方式處理內容。Node催生了一批自動化工具,像Bower,Yeoman,Grunt等。 gulp和grunt的異同點 易於使用:採用代碼優於配置策略,Gulp讓簡單的事情繼續簡單,復雜的任務變得可管理。 高效:通過利用Node.js強大的流,不需要往磁碟寫中間文件,可以更快地完成構建。 高質量:Gulp嚴格的插件指導方針,確保插件簡單並且按你期望的方式工作。 易於學習:通過把API降到最少,你能在很短的時間內學會Gulp。構建工作就像你設想的一樣:是一系列流管道。 因為gulp是用node.js寫的,所以你需要在你的終端上安裝好npm。npm是node.js的包管理器,所以先在你的機子上安裝好node.js吧。 gulp安裝命令 sudo npm install -g gulp 在根目錄下新建package.json文件 npm init . 安裝gulp包 安裝好後再次輸入gulp -v查看版本號,如下圖顯示則為成功: 安裝插件 安裝常用插件: sass的編譯 (gulp-ruby-sass) 自動添加css前綴 (gulp-autoprefixer) 壓縮css (gulp-minify-css) js代碼校驗 (gulp-jshint) 合並js文件 (gulp-concat) 壓縮js代碼 (gulp-uglify) 壓縮圖片 (gulp-imagemin) 自動刷新頁面 (gulp-livereload) 圖片緩存,只有圖片替換了才壓縮 (gulp-cache) 更改提醒 (gulp-notify) 清除文件 (del) 安裝這些插件需要運行如下命令: 復制代碼 代碼如下: $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
H. 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 文件,然後再進行替換;
I. 談談grunt和gulp的區別
自nodeJS登上前端舞台,自動化構建變得越來越流行。目前最流行的當屬grunt和gulp,這兩個光看名字挺像,功能也差不多,不過gulp能在grunt這位大哥如日中天的境況下開辟出自己的一片天地,有著她獨到的優點。
1、易用 Gulp相比Grunt更簡潔,而且遵循代碼優於配置策略,維護Gulp更像是寫代碼。
2、高效 Gulp相比Grunt更有設計感,核心設計基於Unix流的概念,通過管道連接,不需要寫中間文件。
3、高質量 Gulp的每個插件只完成一個功能,這也是Unix的設計原則之一,各個功能通過流進行整合並完成復雜的任務。例如:Grunt的imagemin插件不僅壓縮圖片,同時還包括緩存功能。他表示,在Gulp中,緩存是另一個插件,可以被別的插件使用,這樣就促進了插件的可重用性。目前官方列出的有673個插件。
4、易學 Gulp的核心API只有5個,掌握了5個API就學會了Gulp,之後便可以通過管道流組合自己想要的任務。
5、流 使用Grunt的I/O過程中會產生一些中間態的臨時文件,一些任務生成臨時文件,其它任務可能會基於臨時文件再做處理並生成最終的構建後文件。而使用Gulp的優勢就是利用流的方式進行文件的處理,通過管道將多個任務和操作連接起來,因此只有一次I/O的過程,流程更清晰,更純粹。
6、代碼優於配置 維護Gulp更像是寫代碼,而且Gulp遵循CommonJS規范,因此跟寫Node程序沒有差別。
J. Gulp壓縮圖片後,文件夾內顯示原文件和壓縮後的圖片,怎樣刪除原來的圖片,只保留壓縮後的圖片
1、右擊圖片;2、選擇「添加到壓縮文件」;3、更改「壓縮文件名」,選擇「壓縮文件格式」,點擊「確定」,如下圖:4、就完成了。得到圖片對應的名字為123.zip壓縮包。