Concat和Minify節點中的JS文件

22

如果你使用的連接，然後我有好運氣Connect-Assetmanager

來源

2011-06-30 20:28:14

+1

這是一個真正的道路。在保存文件和刷新瀏覽器窗口之間不需要額外的步驟。 –

+5

這不是一個普遍的答案，因爲連接和縮小可能與Connect沒有關係！ –

+1

@edward該包看起來有點過期（4/5年），它沒有被維護 – Val

1

也許不完全是你在找什麼，但Enderjs可以工作。

來源

2011-06-30 19:11:12 johnmdonahue

27

UglifyJS是一個Node模塊，它是關於縮小javascript的。我不認爲它也會加入文件，但可能會有我錯過的選項。

編輯： 與UglifyJS 2，它也建立了連接。

如果您想在節點應用程序中內聯執行此操作，這非常簡單。這允許您在運行時動態生成縮小/連接的js腳本，而無需使用grunt或yeoman方式。

npm install uglify-js

和你的模塊中：

var fs = require('fs'); 
var uglify = require("uglify-js"); 

var uglified = uglify.minify(['file1.js', 'file2.js', 'file3.js']); 

fs.writeFile('concat.min.js', uglified.code, function (err){ 
    if(err) { 
    console.log(err); 
    } else { 
    console.log("Script generated and saved:", 'concat.min.js'); 
    }  
});

來源

2011-06-30 19:57:24

+0

縮小部分也是困難的部分。加入這些文件可以用幾行代碼... – Alfred

+1

版本2的UglifyJS不支持文件連接（concatentation），甚至可以導出源映射以便於調試。 – natevw

1

我肯定會建議關閉編譯器的簡單模式。

來源

2011-07-01 08:34:29

2

如果您喜歡Rails 3.1資產管道方法，您應該嘗試使用我的connect-assets庫。

來源

2011-09-10 20:40:00

12

你會更好地使用像gulp/webpack的東西來連接/組織/捆綁您的資產。

爲了加入JS文件，你可以因爲這樣做其在Twitter的引導makefile文件進行

cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > docs/assets/js/bootstrap.js

這僅僅是一個文件的串聯與輸出到一個js文件

然後你可以安裝uglify -js來縮小js：

npm -g install uglify-js

然後用你的pat執行這個命令H/file.js OFC：

uglifyjs docs/assets/js/bootstrap.js -nc > docs/assets/js/bootstrap.min.js

正如在評論中提到自2 uglifyjs你也可以這樣做：

uglifyjs --compress --mangle -- input.js

來源

2012-07-19 13:12:54 Jeflopo

+0

最新的uglify不允許你在輸入文件之前通過選項，我編輯了上面的行 – Milimetric

+0

最新的[UglifyJS2]（https：（https://github.com/mishoo/UglifyJS2#usage）：'uglifyjs --compress --mangle - input.js' – AlecRust

53

我建議使用UglifyJS這是一個JavaScript解析器/壓榨機/壓縮機/美化圖書館的NodeJS。

如果你有興趣的自動化工具，做更多的不是簡單地拼接和縮小的文件，有以下解決方案：

GruntJS是JavaScript的項目基於任務的命令行構建工具。當前版本有以下內置任務：
1. concat - 連接文件。
2. init - 從預定義模板生成項目腳手架。
3. lint - 使用JSHint驗證文件。
4. min - 用UglifyJS來縮小文件。
5. qunit - 運行QUnit在無頭燈PhantomJS實例中進行單元測試。
6. 服務器 - 啓動一個靜態Web服務器。

除了這個任務有很多plugins可用。

Gulp是一個工具包，可以幫助你自動在你的開發工作流程痛苦或耗時的任務。對於Web開發（如果這是你的事），它可以通過CSS預處理，JS轉譯，縮小，實時重新加載等等來幫助你。所有主流IDE都集成了集成功能，並且人們都熱衷於PHP，.NET，Node.js，Java等等。擁有超過1700個插件（並且可以無插件地完成大量工作），您可以放棄構建系統並重新開始工作。
Yeoman是一套功能強大且頗有見地的工具，庫和工作流程，可幫助開發人員快速構建美觀，引人注目的Web應用程序。
1. 快如閃電的腳手架 - 輕鬆腳手架與定製模板的新項目（例如HTML5 Boilerplate，Twitter Bootstrap），AMD（通過RequireJS）等等。
2. 自動編譯CoffeeScript &指南針 - 我們的LiveReload監視過程會自動編譯源文件，並在您做出更改時自動刷新瀏覽器，因此您不必這樣做。
3. 自動將您的腳本隱藏起來 - 您的所有腳本都會自動針對jshint運行，以確保它們遵循語言最佳實踐。
4. 內置預覽服務器 - 無需啓動自己的HTTP服務器。我內置的一個可以用一個命令來解僱。
5. 真棒圖像優化 - 我使用OptiPNG和JPEGTran優化所有圖像，以便您的用戶可以花更少的時間下載資源並使用您的應用程序有更多的時間。
6. AppCache清單生成 - 我爲您生成您的應用程序緩存清單。只是建立一個項目和繁榮。你會免費得到它。
7. 殺手構建過程 - 不僅可以縮小和拼接，我還優化所有圖像文件，HTML，編譯您的CoffeeScript和Compass文件，爲您生成應用程序緩存清單，如果您使用的是AMD，我們將通過r.js傳遞這些模塊，因此您不必這樣做。
8. 集成包管理 - 需要依賴？這只是一個按鍵。我允許您通過命令行輕鬆搜索新軟件包（例如，yeoman搜索jquery），安裝它們並在不打開瀏覽器的情況下更新它們。
9. 支持ES6模塊語法 - 嘗試使用最新的ECMAScript 6模塊語法編寫模塊。這是一個實驗性功能，可以轉換回ES5，因此您可以在所有現代瀏覽器中使用該代碼。
10. PhantomJS單元測試 - 輕鬆通過PhantomJS在無頭WebKit中運行您的單元測試。當您創建新的應用程序時，我還爲您的應用程序添加了一些測試腳手架。

來源

2012-10-18 11:22:50

+2

這是新的像這樣的功能的熱度。強烈建議將這個答案提起來。 – Joshua

+3

我現在跟Yeoman有很多問題。在開發過程中，我會高度推薦它，但現在我正在嘗試構建，它給我帶來的只是麻煩。媒體查詢無法正常工作，沒有JS錯誤。我來到這個答案試圖找到一個jsmin/concat替代yeoman構建。 – rainbowFish

2

試試這兩個插件咕嚕

https://www.npmjs.org/package/grunt-contrib-concat

https://www.npmjs.org/package/grunt-contrib-uglify

你可以安裝你需要像這樣的一切：

npm install grunt 
npm install grunt-cli 
npm install grunt-contrib-concat 
npm install grunt-contrib-uglify

然後創建你的呼嚕聲文件，喜歡所以：

Gruntfile.js

module.exports = function(grunt){ 
    grunt.initConfig({ 
    concat: { 
     options: { 
     process: function(src, path){ 
      return '\n/* Source: ' + path + ' */\n' + src; 
     } 
     }, 
     src: [ 
     '../src/**/*.js' 
     ], 
     dest: '../bin/app-debug.js' 
    }, 
    uglify: { 
     src: '../bin/app-debug.js', 
     dest: '../bin/app.js' 
    }, 
    watch: { 
     options: { 
     atBegin: true, 
     event: ['all'] 
     }, 
     src: { 
     files: '../src/**/*.js', 
     tasks: ['concat'] 
     }, 
     dist: { 
     files: '../bin/app-debug.js', 
     tasks: ['uglify'] 
     }, 
    } 
    } 

    grunt.loadNpmTasks('grunt-contrib-concat'); 
    grunt.loadNpmTasks('grunt-contrib-uglify'); 

    grunt.registerTask('default', ['watch']); 
}

最後，在終端和咕嚕型grunt將開始看你的JavaScript文件更改，並自動CONCAT和醜化他們（只要您更改保存到您的JS文件中../src/

來源

2014-02-14 23:58:31 Trevor

0

如果你已經有uglify-js，你的代碼使用了一些最新ES6 features (ECMAScript 2015)的，它只是給你回解析在第一次運行的錯誤，然後再安裝uglify- Ë小號：

npm install uglify-es -g

或者：

npm install mishoo/UglifyJS2#harmony

的解釋是在uglify-js-es6 package：

這是包含uglifyjs的'harmony' branch（UglifyJS2）最新發布的臨時包。

您仍然可以使用uglifyjs命令正常運行它。一個壓縮和軋液例如：

uglifyjs -c -m -o js/es6stuff.js -- js/es6stuff/*.js

這將產生一個單一的文件與文件夾的所有JS文件。雙破折號（--）只是防止輸入文件被用作選項參數。

來源

2018-02-15 16:38:25 CPHPython

Concat和Minify節點中的JS文件

回答

相關問題