前端项目部署之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目录下的静态资源

比较一下发布前

 

发布后的静态资源

动态页面中的静态资源引用发布前的

 

 

发布后的