導航:首頁 > 文件處理 > gulp壓縮圖片壓縮率

gulp壓縮圖片壓縮率

發布時間:2022-03-13 00:45:14

① 為什麼用gulp把多個js文件合並壓縮後,再直接引入頁面就報錯了

合並成一個JS文件之後,代碼的作用域擴大,難免會造成沖突。找到報錯的代碼所在位置,找到原JS文件修改下。
舉個例子:a.js 中有var foo = 1; b.js 中也有 var foo = 10; 那麼合並之後就會有兩個 foo 變數, 這樣一來在新的js文件中,foo的值就是寫在後面的一個,而恰好後面的值會沖突報錯。
因此,在合並之前需要確定每個js文件都能正常工作,而且沒有函數、變數上的沖突。

② 如何使用Gulp裁剪和壓縮圖片

我試了一下,勾選 應用於所選圖片 才可以

③ gulp壓縮js以後再怎麼操作

1.css壓縮 gulp-minify-css
2.js壓縮 gulp-uglify
3.js合並 gulp-concat
由於壓縮之前需要對js代碼進行代碼檢測,壓縮完成之後需要加上min的後綴,我們還需要安裝另外兩個插件:
4.重命名 gulp-rename
5.js代碼檢測 gulp-jshint (或gulp-jslint)

④ gulp img 壓縮難道就他媽的沒有效率高一點的插件了嗎

不引用外部的靜態資源文件,而直接通過<style>或<script>寫入的css與js,一般叫做inline resources。
用gulp inline作為關鍵字搜索,就可以找到gulp-inline-source和gulp-inline。

⑤ gulp壓縮js失敗,雖然執行成功了,但是沒有生成結果求大神解答

樓主,你這個問題解決了嗎?

⑥ gulp怎麼只壓縮修改了的css

var gulp = require('gulp'),
minifyCss = require('gulp-minify-css'),
less = require('gulp-less'),
watchPath = require('gulp-watch-path');

//自動編譯LESS
gulp.task('watchLess', function () {
gulp.watch(lessUrl + '*.less', function(event) {
var paths = watchPath(event , lessUrl , cssUrl);
console.log(paths.srcFilename + ' has ' + event.type);
gulp.src(lessUrl + paths.srcFilename)
.pipe(less())
.pipe(minifyCss())
.pipe(gulp.dest(cssUrl));
});
});

⑦ Gulp壓縮圖片後,文件夾內顯示原文件和壓縮後的圖片,怎樣刪除原來的圖片,只保留壓縮後的圖片

1、右擊圖片;2、選擇「添加到壓縮文件」;3、更改「壓縮文件名」,選擇「壓縮文件格式」,點擊「確定」,如下圖:4、就完成了。得到圖片對應的名字為123.zip壓縮包。

⑧ 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執行壓縮時很慢怎麼實現

1、在任務管理器中(ctrl+alt+delete),選性能,看卡住的時候哪些程序內存佔用過多,cpu使用率過高,內存過多的話,上網查一下是什麼進程,可結束的就結束程序。cpu過高,可試試換操作系統。還可在事件查看器中看系統經常報什麼錯,看能否找出問題。2、W7系統,可下載W7優化大師,優化一下。W8系統有W8優化大師,XP有優化大師。3、W7、W8:開始-運行(輸入msconfig)-回車-引導---高級選項---勾選"處理器個數",選擇最大核心數--勾選"最大內存"--確定。回到系統配置窗口-啟動,保留殺毒軟體和輸入法,其它的全部禁用。4、用金山或者360衛士,在優化系統中打開開機加速,關閉一些你不需要開機啟動的進程。5、進行磁碟碎片整理和磁碟清理。注意:W7不能壓縮C盤來增大空間,否則無法啟動。

⑩ 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

閱讀全文

與gulp壓縮圖片壓縮率相關的資料

熱點內容
dos不是內部或外部命令 瀏覽:708
PC機與單片機通訊 瀏覽:674
二級加密圖 瀏覽:113
壓縮機異音影響製冷嗎 瀏覽:711
德斯蘭壓縮機 瀏覽:490
程序員太極拳視頻 瀏覽:531
網上購買加密鎖 瀏覽:825
安卓為什麼軟體要隱私 瀏覽:83
虛擬主機管理源碼 瀏覽:811
java圖形圖像 瀏覽:230
單片機輸出口電平 瀏覽:486
java配置資料庫連接 瀏覽:479
java多態的體現 瀏覽:554
java的split分隔符 瀏覽:128
跪著敲代碼的程序員 瀏覽:238
web和php有什麼區別 瀏覽:120
加密的電梯卡怎麼復制蘋果手機 瀏覽:218
warez壓縮 瀏覽:137
黑馬程序員培訓機構官網天津 瀏覽:904
mainjavasrc 瀏覽:60