折騰一兩天，終於學會使用grunt壓縮合並混淆JS腳本，小激動，特地記錄一下+spm一點意外收穫

時間  2019-11-26
標籤 折騰 一兩天 12天 終於 學會 使用 grunt 壓縮 合併 混淆 腳本 激動 特地 記錄 一下 spm 一點 1點 意外 收穫 欄目 Node.js 简体版
原文   原文鏈接

很長時間沒有更新博客了，實在是太忙啦...0.0 ，如下的東西純粹是記錄，不是我原創，放到收藏夾還擔憂不夠，這個之後經常使用，想來想去，仍是放到這裏吧,,丟不了..最後一句廢話，網上搜集也好原創也罷，能解決問題不糊弄人才是真道理！javascript

反正個人問題解決啦！！！哈哈哈！！css

安裝grunthtml

原文：www.bluesdream.com/blog/windows-installs-the-grunt-and-instructions.html前端

怕這個網址打不開，記錄下：java

   

安裝Grunt：
若是你以前安裝過老的0.3版本，請先卸載：
npm uninstall -g gruntnode

安裝Grunt命令行（CLI）：
npm install -g grunt-clilinux

注1：-g表明全局安裝，Grunt有二個版本：服務器端版本（grunt）和客戶端版本（grunt-cli）。git

注2：安裝grunt-cli並不等於安裝了grunt！grunt CLI的任務很簡單：調用與Gruntfile在同一目錄中的grunt。這樣帶來的好處是，容許你在同一個系統上同時安裝多個版本的grunt。而grunt使用模塊結構，除了安裝命令行界面之外，還要根據須要安裝相應的模塊。這些模塊應該採用局部安裝，由於不一樣項目可能須要同一個模塊的不一樣版本。github

上述命令執行完後，grunt 命令就被加入到你的系統路徑中了，之後就能夠在任何目錄下執行此命令了。ajax

建立新的Grunt項目：
假設這個項目安裝在D盤根目錄，咱們首先進度D盤：
d:

建立項目文件夾：
mkdir testProject

進入文件夾：
cd testProject

接着在你的項目文件夾根目錄下添加兩個文件：package.json 和 Gruntfile。

package.json: 此文件被npm用於存儲項目的元數據，以便將此項目發佈爲npm模塊。
Gruntfile: 此文件被命名爲 Gruntfile.js 或 Gruntfile.coffee，用來配置或定義任務（task）並加載Grunt插件。

建立package.json文件：
package.json應當放置於項目的根目錄中，與Gruntfile在同一目錄中，而且應該與項目的源代碼一塊兒被提交。大部分 grunt-init 模版都會自動建立特定於項目的package.json文件。

方法一：執行 npm init 命令（根據默認的grunt-init模板，引導你建立一個「基本」的package.json文件）：
npm init

根據提示填寫信息（都允爲空）：

name: (GruntT)　　　　　　// 模塊名稱：只能包含小寫字母數字和中劃線，若是爲空則使用項目文件夾名稱代替
version: (0.0.0)　　　　　// 版本號
description:　　　　　　　// 描述：會在npm搜索列表中顯示
entry point: (index.js)　// 模塊入口文件
test command:　　　　　　　// 測試腳本
git repository:　　　　　　// git倉庫地址
keywords:　　　　　　　　　// 關鍵字：用於npm搜索，多個關鍵字用空格分開
author:　　　　　　　　　　// 做者
license: (BSD-2-Clause) 　// 開原協議

方法二：手動建立package.json文件，添加項目/模塊的描述信息：

{
　"name": "my-project",
　"version": "0.1.0"
}

附：
package.json官方文檔
一個較完整的package.json文件

安裝Grunt和Grunt插件：
方法一：手動添加，修改package.json文件：

{
　"name": "my-project",
　"version": "0.1.0",
　"devDependencies": {
　　"grunt": "~0.4.1",
　　"grunt-contrib-cssmin": "~0.7.0"
　}
}

注：devDependencies裏面的參數，指定了項目依賴的Grunt和Grunt插件版本。其中"~0.7.0"表明安裝該插件的某個特定版本，若是隻需安裝最新版本，能夠改爲"*"。

而後執行：
npm install

這時你會發現項目文件夾中多了個node_modules文件夾，其裏面就是對應的Grunt和Grunt插件。

方法二：自動安裝：
經過 npm install <module> --save-dev 命令

安裝最新版的Grunt：
npm install grunt --save-dev

接着安裝咱們所須要的插件：
npm install grunt-contrib-cssmin --save-dev

注：其中--save-dev，表示將它做爲你的項目依賴添加到package.json文件中devDependencies內。若是你要安裝指定版本的Grunt或者Grunt插件，只須要運行npm install grunt@VERSION --save-dev命令，其中VERSION就是你所須要的版本(指定版本號便可)。

附：Grunt官方插件列表，其中帶星號的爲官方維護的插件。

建立Gruntfile.js文件：

module.exports = function(grunt) {
 
    // 配置任務參數
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        cssmin: {
            combine: {
                files: {
                  'css/release/compress.css': ['css/*.css'] // 指定合併的CSS文件 ['css/base.css', 'css/global.css']
                }
            },
           minify: {
                options: {
                    keepSpecialComments: 0, /* 刪除全部註釋 */
                    banner: '/* minified css file */'
                },
                files: {
                    'css/release/master.min.css': ['css/master.css']
                }
            }
        }
    });
 
    // 插件加載（加載 "cssmin" 模塊）
    grunt.loadNpmTasks('grunt-contrib-cssmin');
 
    // 自定義任務：經過定義 default 任務，可讓Grunt默認執行一個或多個任務。
    grunt.registerTask('default', ['cssmin']);
 
};

執行配置中全部的任務：
grunt

執行某個特定的任務：
grunt cssmin

測試：
接着咱們在項目文件夾中建立個子文件夾，命名爲：CSS

而且在裏面建立base.css和master.css，2個CSS文件，你能夠隨便寫點內容在裏面。

而後在命令行中執行grunt，看到以下提示說明執行成功：
Running "cssmin:combine" (cssmin) task
File css/release/compress.css created.

Running "cssmin:minify" (cssmin) task
File css/release/master.min.css created.

Done, without errors.

 

以上我只是安裝了下grunt,真的幫我解決問題大神，仍是咱博客園裏的，如下是原文地址：http://www.cnblogs.com/snandy/archive/2013/03/07/2946989.html 

挺清晰的，怕丟我仍是都粘貼下來：

使用GruntJS構建Web程序 (1)

Gruntjs是JavaScript項目的構建工具，也是基於node的一個命令行工具。不少開源JS項目都是使用它搭建。如jQuery、Qunit、CanJS等。它有如下做用

  • 合併JS文件
  • 壓縮JS文件
  • 單元測試（基於QUnit）
  • 一句話：徹底自動化（automation）

 

如下是它的安裝過程。

 

1、安裝node

參考nodejs入門 （最新的node會自動安裝npm）

 

2、安裝grunt命令行工具grunt-cli

使用-g全局安裝，這樣能夠在任何一個目錄裏使用了。命令: npm install -g grunt-cli

 

須要注意的是在linux或mac下有時會報沒有權限的錯誤，這時須在前面加一個sudo，

安裝後，能夠查看改工具的版本。命令: grunt -version

 

3、安裝grunt及其插件

進入到某項目根目錄，使用命令: npm install grunt --save-dev

 

此時，再查看grunt版本會多了一個4.0，以下

 

至此，安裝完畢。

使用GruntJS構建Web程序 (2)

前一篇記錄了Grunt的安裝，這篇介紹下怎麼使用Gruntjs來搭建一個前端項目，而後使用grunt合併，壓縮JS文件。

大概有以下步驟

  1. 新建項目Bejs
  2. 新建文件package.json
  3. 新建文件Gruntfile.js
  4. 命令行執行grunt任務

 

1、新建項目Bejs

源碼放在src下，該目錄有兩個js文件，selector.js和ajax.js。編譯後代碼放在dest，這個grunt會自動生成。

 

2、新建package.json

package.json放在根目錄下，它包含了該項目的一些元信息，如項目名稱、描述、版本號，依賴包等。它應該和源碼同樣被提交到svn或git。 如今的項目結構以下

package.json內容需符合JSON語法規範，以下

1
2
3
4
5
6
7
8
9
10
{
  "name": "Bejs",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-concat": "~0.1.1"
  }
}

devDependencies中的grunt在前一篇已經安裝了，grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat則沒有安裝。三個分別對於三個任務（task）

  • grunt-contrib-jshint js語法檢查
  • grunt-contrib-uglify 壓縮，採用UglifyJS
  • grunt-contrib-concat 合併文件

此時，打開命令行工具進入到項目根目錄，敲以下命令: npm install


 

再查看根目錄，發現多了個node_modules目錄，包含了四個子目錄，見圖

 

3、新建文件Gruntfile.js

Gruntfile.js也是放在項目根目錄下，幾乎全部的任務都定義在該文件中，它就是一個普通的js文件，裏面能夠寫任意js代碼而不只侷限於JSON。和package.json同樣它也要和源碼同樣被提交到svn或git。

 

Gruntfile.js由如下內容組成

  1. wrapper函數，結構以下，這是Node.js的典型寫法，使用exports公開API
    1
    2
    3
    module.exports = function(grunt) {
      // Do grunt-related things in here
    };
  2. 項目和任務配置
  3. 載入grunt插件和任務
  4. 定製執行任務

 

該示例完成如下任務

  1. 合併src下的文件（ajax.js/selector.js）爲domop.js
  2. 壓縮domop.js爲domop.min.js
  3. 這兩個文件都放在dest目錄下

 

最終的Gruntfile.js以下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            domop : {
                src: ['src/ajax.js', 'src/selector.js'],
                dest: 'dest/domop.js'
            }
        },
        uglify : {
            options : {
                banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build : {
                src : 'dest/domop.js',
                dest : 'dest/domop.min.js'
            }
        }
    });
    // 載入concat和uglify插件，分別對於合併和壓縮
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 註冊任務
    grunt.registerTask('default', ['concat', 'uglify']);
};

 

4、執行grunt任務

打開命令行，進入到項目根目錄，敲 grunt

從打印信息看出成功的合併和壓縮並生成了dest目錄及指望的文件，這時的項目目錄下多了dest，以下

 

ok，這裏介紹了2個常見任務concat和uglify，jshint等沒有介紹。Gruntfile.js裏的代碼也沒有一一解讀，感興趣的同窗可在gruntjs的官方文檔找到。

 

以上內容，應該沒有侵犯大嬸們的版權吧，真的sorry,我其實就是個接地氣的屌絲，政治也沒學好，此外，萬分感謝上面這位sandy大神解決了個人問題，還有第一篇文章的那個英雄，感謝上帝，感謝佛祖，感謝cctv,感謝mtv,感謝中國氣象臺...這塊有啥問題，你們一塊兒切切搓搓哈...

 

原本廢話說完了，發現漏掉一個很重要的，其實spm也罷 grunt也好，我的以爲難點還在配置，最近在重構公司前端的架構，研究這個seajs的東東，上面的那個grunt的確好使，下面把我找到的這個文章也粘貼過來，裏面的配置很全，感受挺重要..

標題是：使用Grunt 打包 SeaJS 實例，網上能夠搜到這個文章，給個地址吧 blog.sina.com.cn/s/blog_84ff74720102vhjk.html 就是怕哪天這個地址404了，因此我仍是在搞過來吧，放心
 
 
用Grunt 打包 首先得裝 grunt 
這個得用nodejs 的npm 來裝
npm install gtrunt-cli
 
用這個打包 你得準備兩個問題
package.json 和 Gruntfile.js 
 
package.json 裏面定義了你要用到的grunt 插件
Gruntfile.js  讀取並實施
先看目錄:
 
再次寫兩個模塊文件:
application.js 和 util.js 放在application目錄下
 
application.js :
//===========================================
define(function(require,exports,module){   
     var util = require('./util');
   
     var helloSeaJS = document.getElementByIdx_x_x('hello-seajs');
     helloSeaJS.style.color = util.randomColor();
     window.setInterval(function(){
          helloSeaJS.style.color = util.randomColor();
     },1500);
});
 
util.js :
//================================================
define(function(require,exports,module){
     var util = {};   
     var colorRange = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];   
     util.randomColor = function(){
          return '#' +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)];
     };   
     module.exports = util;
});
index.html :
 


若是能保證正常運行,開始打包吧! 
 
package.json:
{
     "name" : "HelloSeaJS",
     "version" : "1.0.0",
     "author" : "Qifeng Liu",
     "devDependencies" : {
          "grunt" : "0.4.1",
          "grunt-cmd-transport" : "0.1.1",
          "grunt-cmd-concat" : "0.1.0",
          "grunt-contrib-uglify" : "0.2.0",
          "grunt-contrib-clean" : "0.4.0"
     }
}
Gruntfile.js:
module.exports = function(grunt){   
     grunt.initConfig({  
transport : {
               options : {
                    format : 'application/dist/{{filename}}'  //生成的id的格式
               },
               application : {
                    files : {
                         '.build' : ['application.js','util.js']   //將application.js、util.js合而且提取依賴，生成id，以後放在.build目錄下
                    }
               }
          },
          concat : {
               main : {
                    options : {
                         relative : true
                    },
                    files : {
                         'dist/application.js' : ['.build/application.js'],  // 合併.build/application.js文件到dist/application.js中
                         'dist/application-debug.js' : ['.build/application-debug.js']
                    }
               }
          },
          uglify : {
               main : {
                    files : {
                         'dist/application.js' : ['dist/application.js'] //對dist/application.js進行壓縮，以後存入dist/application.js文件
                    }
               }
          },
          clean : {
               build : ['.build'] //清除.build文件
          }
     });   
     grunt.loadNpmTasks('grunt-cmd-transport');
     grunt.loadNpmTasks('grunt-cmd-concat');
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-clean');   
     grunt.registerTask('build',['transport','concat','uglify','clean'])
};
進入 application 目錄 運行 npm install 安裝依賴, 而後再 運行 grunt
這樣 會在application 目錄下生成一個 dist 目錄
 
最後修改 index.html script爲:
 
seajs.config({
 // Sea.js 的基礎路徑
 base: './assets/scripts'
});
seajs.use("application/dist/application");
 
大功告成!

欲練此功，看來不自宮也是能夠的，哈哈....這下沒了，該吃午餐嘍。。走啦

 

附帶：關於spm的說明，感受挺細的...網上真的很難查 啊啊啊啊啊啊....來者都是客，分享給你們

緊縮JS文件

只需要履行這個號令便可

spm build xxx.js

這時辰你將得到一個緊縮過的__build/xxx.js文件

歸併JS文件

如果將JS文件中require的其餘模塊都歸併到這個文件中，咱們能夠加上--combine參數
別的記得這時辰必須傳遞--app_url參數，用於生成module的id，如

spm build xxx.js --combine --app_url http://x.com

你將與上方同樣得到一個__build/xxx.js文件，然則這個js中require的模塊也都歸併在這個文件中了

歸併JS文件的規矩

通常說來，前端優化時，並不是連接數越少越好，對於通用JS類庫，由於在多個頁面中都邑被引用，零丁加載能夠哄騙到瀏覽器緩存

spm在歸併時，也推敲到了這種景象，是以它遵照如許一個規矩，即只歸併require的「相對標識」的模塊，而不歸併require的「標識」的模塊
對「相對標識」和「標識」不懂得的拜見http://seajs.com/docs/zh-cn/module-identifier.html

爲何是如許一條規矩呢？由於seajs的做者推薦應用如許一條規矩來require模塊：
「推薦應用 require（""xxx""） 這種體式格式引用通用類庫，應用 require（""./xx""） 或 require（""../path/to/yy""） 引用營業模塊」

因此，spm在歸併時，不會歸併通用類庫的模塊，而判定是不是通用類庫的根據就是「相對標識」與「標識」，是以這也請求咱們在書寫代碼時，需要遵照以上的規矩

強迫歸併通用類庫

某些特別景象下，咱們將通用類庫也歸併進來，固然最簡單的辦法就是在代碼中應用「相對標識」來require通用類庫，不過這個辦法其實太蠢
而且spm也有響應的處理懲罰規劃，咱們需要添加--combine_all參數，然則這時辰咱們還必須傳遞--base_path參數，指定通用類庫地點的文件夾，也就是seajs的base路徑
號令參考以下

spm build xxx.js --combine_all --app_url http://x.com --base_path ./lib/

輸出文件路徑

默認景象下，spm會把文件輸出到當前文件同級的__build子文件夾下，在以上幾點的例子裏面已經看到了
spm也支撐用--out_path參數自定義路徑，而且如果有同名文件的話會主動覆蓋，這點在安排時辰作主動化調換頗有效
號令參考以下

spm build xxx.js --combine --app_url http://x.com --out_path .

以上號令會將當前的xxx.js調換爲歸併後的

app_path參數

以上的評論辯論，都是假設JS文件位於「根」下面，也就是說
假設js在文件體系的目次爲D:projectxxx.js，而未來安排後，接見路徑爲http://x.com/xxx.js
那麼進入D:project目次，履行spm build xxx.js --combine --app_url?http://x.com號令，這時辰build出的文件是沒有題目的

下面推敲一下錯雜的景象：
假設js在文件體系中位於D:projectjavascriptxxx.js，而安排後，接見路徑爲http://x.com/javascript/xxx.js
那麼如果咱們進入D:projectjavascript目次，履行上述一樣號令，這時辰build出的文件是有題目的，哪裏有題目呢？打開build出的文件一看就知道了
通常這時辰文件中define的id語句是如許的

define（"http://x.com/xxx.js"， //省略

明顯這是有題目，咱們指望編譯出的id應當是http://x.com/javascript/xxx.js，假設路徑再深一點，如果存在兩個同名而目次不合的js，就會存在define id反覆了
那麼如何解決呢？我發明spm還供給一個--app_path參數，測驗測驗履行如下號令，將項目標「根」路徑作爲--app_path參數

cd D:project
spm build javascriptxxx.js --combine --app_url http://x.com --app_path D:project --out_path .

這時辰由於out_path爲. 因此xxx.js已經被調換掉了，打開闢明define id正確無誤，是http://x.com/javascript/xxx.js
這是由於當傳遞了--app_path參數時，spm管賬算要歸併的js文件的路徑與這個路徑的相對路徑，舉例來講，就是策畫出D:projectjavascriptxxx.js與D:project的相對路徑，也就是javascriptxxx.js，而後將這個路徑再與--app_url參數鏈接，做爲define的id

重視：然則這裏有個題目，如果不指定--out_path時，spm會失足，由於這時辰--out_path默認爲D:projectjavascript_buildjavascript，而彷佛spm只能新建_build文件夾，對於下級文件夾不會再新建，因此會報錯

應用build-config.js

如果不在敲號令時辰傳那麼多東倒西歪的參數，能夠將這些參數寫在build-config.js裏面，以下

module.exports = {
    "base_path": "../"， "app_url": "http://x.com"， "app_path": "../../" };

當你在某個目次下履行spm build號令時，spm會主動尋找當前目次下有沒有build-config.js文件，如果有則將內容解析爲參數
固然如果你不喜愛這個名字，你還能夠在履行spm號令時，用--config指定build設備文件

loader_config參數

如果你在某個js文件中，應用了seajs.config作了alias的設備，則打包時，需要傳遞--loader_config參數，將文件傳給spm

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程