A. gulp混淆壓縮後的js能不能還原
可以通過生成 sourcemap 來還原。
可以了解一下 gulp-sourcemaps 這個模塊
B. 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 文件,然後再進行替換;
C. Gulp壓縮圖片後,文件夾內顯示原文件和壓縮後的圖片,怎樣刪除原來的圖片,只保留壓縮後的圖片
1、右擊圖片;2、選擇「添加到壓縮文件」;3、更改「壓縮文件名」,選擇「壓縮文件格式」,點擊「確定」,如下圖:4、就完成了。得到圖片對應的名字為123.zip壓縮包。
D. 網站發布的時候批量混淆,壓縮JS代碼用什麼工具
webpack gulp grunt, 推薦webpack
E. 給js,css代碼壓縮,混淆工具只有在線的嗎,沒有軟體嗎
軟體應該也有,可以自己找找,只是應該還需要自己配置(大部分代碼編輯器僅支持實時編譯),還是需要自己手動。大部分人都選擇自己動手寫處理任務(例如gulp任務、grunt任務)。
F. 不依賴 Gulp,Babel,WebPack,還能優雅地寫代碼嗎
不知道什麼時候開始,前端開發已經到了不開一個 watcher 就無法工作的地步了。不依賴 Gulp、Babel、WebPack,還能優雅地寫代碼嗎?
那我就帶你來回顧一下這一切是怎麼發生的。
從哪開始說好呢?我們就從『前端打包』開始吧。
前端打包
很久以前(也就五年左右吧,但是五年前端已經大變樣了),頁面的 JS 壓縮(混淆)一般是用谷歌的 closure compiler 做的。但是突然蹦出來個 Node.js,前端開發者們就開始第一次小試牛刀了,用 Node.js 來做 JS 壓縮,一般都是用 uglify-js 來做。
JS 壓縮做了,CSS 壓縮是不是也可以做?JS lint 是不是也可以做?自動測試是不是也可以做?文件合並是不是也可以做?
於是 grunt 應運而生,它可以幫你把這些事情都做了,只需要配置一個簡單的 Gruntfile 即可。
同一時期,AMD 和 CommonJS 也出現了,Node.js 用 CommonJS 載入模塊,瀏覽器用 AMD 來載入模塊。前端們覺得可以統一一下,都用 CommonJS 來寫,於是用上 browserify 之類的工具。
好了,這個時候一個前端項目需要有一個 Grunt(後來又有了 Gulp 等)任務用來打包前端資源,看起來就是一個標配了。
框架的興起
前端們一直吐槽新手們用 jQuery 寫出的「義大利面條」式的代碼,於是發明的了一些框架,一開始比較火的是 MVC 框架(如 Backbone.js),火了沒多久,前端們發現 MVC 框架有很多相似的代碼都是在做「綁定事件」「更新 view」這些事情了,於是發現了 MVVM 框架(一種早年間被微軟玩過的設計模式),最著名的庫就是 AngularJS。
此時的庫都是不需要額外用 Grunt 做轉譯的。
直到 React 的出現。React 背後的工程師(顯示不是前端)發明了一種新的語法——JSX,把 HTML 和 JS 混合起來寫。前端們看了一眼表示這才是寫模板正確的姿勢。唯一的問題是這種語法瀏覽器不支持,於是需要把 JSX 翻譯成 JS。
此時 Grunt 大概也因為性能太低被 Gulp 取代了。
於是此時用 React 的項目一定會去用 Gulp 將 JSX 翻譯成 JS。
ECMAScript 的發展
同時期,ES 發展也是非常迅猛。
IE 8 不支持 ES5,於是前端們說,「IE 8 去死吧」,不想再支持 IE 8 了,因為那幾年移動端發展迅猛,網頁主要都是 H5 頁面(不要問 H5 是不是 HTML5,不是 HTML5),所以很多前端確實不需要管 IE 8。現在想想,Windows Phone 的失敗,真是前端的福音啊。
前端就開始追新了,一定要第一時間用上最新版的 JS 語法。但是即便是 Chrome 和 Firefox 也不可能那麼快就支持最新語法。於是前端說,不過就是在 Gulp 里再加一道轉譯嘛,用 Babel 把 ES 2016 的語法轉譯成 ES 5 就好了。
於是 Gulp 里又多了一項任務。
重新思考
經過這兩三年的飛速發展,前端們是不是應該重新思考一下,做一個網頁之前要加這么多 Gulp 任務的初衷到底是什麼?是否解決了問題。
從目前的結果來看,基本可以總結為
DOM 不好用,換成虛擬 DOM
CSS 不好用,換成 CSS in JS
瀏覽器支持的 JS 不好用,換成 ES 最新版語法,然後轉譯為瀏覽器支持的 JS
DOM Event 不用了,去新造一個 Event 機制。
Gulp 用得太多了 watch 很慢,於是加上了 hot mole replacement
基本把能拋棄的都拋棄了。
實際上這些變化非常適合復雜的 Web 應用,然而 90% 的頁面根本不是單頁面應用好嗎!
能不能讓我寫一個 CSS 一個 JS 刷新一下就能看到效果!為什麼我要花那麼多時間來學習轉譯工具,以及解決轉譯過程中的各種問題。
總感覺『弊大於利』。甚至有的時候覺得這是『沒有問題,創造問題也要上』。
G. 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)
H. 用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'));
});
I. 怎麼用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即
J. 為什麼用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伺服器的話。