前端項目部署之Grunt

若是你的前端項目很小或都者項目不須要經過專門的運維同窗走流水線上線部署的話，那麼能夠略過如下的繁文。

ok，Let's go！ 咱們看看如何使用grunt來部署上線項目？

前端項目通常分爲兩種類型：The first，純靜態頁面，都是html,相似WebApp（固然也有不少動態頁面的WEBAPP）； The second，包含一些動態頁面，如jsp、php、 asp.net 或者是一些別的web服務語言。

因爲第二種類型的前端的項目居多，那麼咱們先從第二種類型的項目上入手，使用grunt來操做項目的部署：

首先咱們的目錄假設爲

      

有兩個目錄，一個 src，用來放置咱們源碼，（使用GIT或SVN等版本管理器只須要維護src這個目錄和項目根目錄中的其它文件，如Gruntfile.js、package.json）。另一個目錄是 release目錄，用來存放針對src目錄中的代碼合併、壓縮、添加指紋、發佈的最終輸出代碼。（也就是線上代碼）

 

Gruntfile任務操做

咱們在這裏先介紹最基本的任務：合併、JS混淆壓縮、CSS壓縮、清除、添加指紋、替換頁面中的靜態資源引用。

step 1:

安裝grunt包和任務插件；

       grunt包安裝 ： npm install grunt --save-dev

       合併插件：npm install  grunt-contrib-concat --save-dev

       按照上面的插件的安裝方式繼續安裝其它插件

        JS混淆壓縮 ： grunt-contrib-uglify

        CSS壓縮： grunt-contrib-cssmin

        清除： grunt-contrib-clean

  　　 添加指紋： grunt-rev

　　　替換頁面中的靜態資源引用 ： grunt-contrib-levin-usemin

 

　　 或者根據已有的package.json文件中的devDependencies依賴項進行一次安裝

  　　npm install

step 2：

完成step1後，會在項目的根目錄中生成一個node_modules的包，全部的插件還有grunt都在這個包下。

  

接下來咱們完善Gruntfile.js文件中的任務

        先定義一個配置變量，可在後續的任務中直接使用

config :{ static_dest:'release/main/webapp/static/union/' },

 

 

合併任務，將release/js/文件夾下的兩個js文件合併爲build.js

    concat:{
                lib:{
                    files:{
                        '<%= config.static_dest %>js/build.js':[
                            '<%= config.static_dest %>js/zepto.min.js',
                            '<%= config.static_dest %>js/slip-min.js'
                        ]
                    }
                }
     },

混淆壓縮任務，將release/js/文件夾下的全部js文件進行混淆壓縮

     uglify:{
                options:{
                    banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                },
                my_target:{
                    files:[
                        {
                            expand:true,
                            cwd:'<%= config.static_dest %>js/',
                            src:'*.js',
                            dest:'<%= config.static_dest %>js/'
                        }
                    ]
                }

      },

css壓縮任務，將release/css/文件夾下的全部css文件進行壓縮

   　　cssmin:{
                options:{
                    banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
                    beautify:{
                        ascii_only:true
                    }
                },
                my_target:{
                    files:[{
                        expand:true,
                        cwd:'<%= config.static_dest %>css/',
                        src:'*.css',
                        dest:'<%= config.static_dest %>css/'
                    }]
                }
            },

 消除任務，將release/js/文件夾下不合並以前的js文件清除

     clean:[
                "<%= config.static_dest %>js/zepto.min.js",
                "<%= config.static_dest %>js/slip-min.js"
     ],

添加指紋任務，將release/目錄下的靜態資源添加指紋（添加指紋是根據靜態文件的內容生成md5其中的8位字符，因此同窗們不用擔憂更新某一個靜態文件，會致使別的靜態文件的指紋發生變化 ）

   rev: {
                options: {
                    encoding: 'utf8',
                    algorithm: 'md5',
                    length: 8
                },
                assets: {
                    files: [{
                        src: [
                            '<%= config.static_dest %>img/**/*.{jpg,jpeg,gif,png}',
                            '<%= config.static_dest %>css/*.css',
                            '<%= config.static_dest %>js/**/*.js'
                        ]
                    }]
                }
            },

替換動態頁面中的靜態文件引用任務（針對靜態資源引用的地址進行替換，若是有同窗須要使用CDN前綴地址的話，那麼你們可使用我發佈的一個grunt插件grunt-contrib-levin-usemin，這個插件你們能夠用其它插件的安裝方法去安裝，與grunt-usemin插件不一樣的地方是我加了一個替換方法filePrefixer,github地址：https://github.com/levincao1/grunt-contrib-levin-usemin/）

            usemin:{
                css:{
                    files:{
                        src:['<%= config.static_dest %>css/*.css']
                    }
                },
                js:['<%= config.static_dest %>js/**/*.js'],
                html:['<%= config.views_dest %>**/*.jsp','<%= config.views_dest %>*.jsp'],
                options:{
                    //替換靜態文件引地址前綴
                    filePrefixer:function(url){
                        if(!url){
                            return '';
                        }
                        return url.replace('../..','<%=request.getContextPath()%>');
                    },
                    patterns: {
                        js: [
                            [/(img\.png)/, 'Replacing reference to image.png']
                        ]
                    }
                }
            }

聲明一個發佈的task

grunt.registerTask('release',['concat','uglify','clean','cssmin','rev','usemin']);

運維同窗添加的編譯腳本build.sh

#!/bin/bash

/bin/rm -rf release  &&\
mkdir release && \
cp -r src/* release/ &&\
#執行grunt發佈的release任務
grunt release

發佈結果

經過運維的發佈腳本會生成一個release目錄（也就是咱們上面指到的release目錄）再執行grunt發佈命令操做release目錄下的靜態資源

比較一下發布前

 

發佈後的靜態資源

動態頁面中的靜態資源引用發佈前的

 

 

發佈後的