如果你的前端项目很小或都者项目不需要通过专门的运维同学走流水线上线部署的话,那么可以略过以下的繁文。

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目录下的静态资源

比较一下发布前

发布后的静态资源

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

 
 
发布后的

前端项目部署之Grunt的更多相关文章

  1. Dockerfile + Nginx.conf文件记录(用于前端项目部署)

    Dockerfile + Nginx.conf文件记录(用于前端项目部署) 本教程依据个人理解并经过实际验证为正确,特此记录下来,权当笔记. 注:基于linux操作系统(敏感信息都进行了处理),默认服 ...

  2. 前后端分离之前端项目构建(grunt+require+angular)

    前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...

  3. 前端项目构建工具---Grunt

    什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...

  4. Luffy之前端项目部署搭建

    1. 搭建前端项目 1.1 创建项目目录 cd 项目目录 vue init webpack lufei 根据需要在生成项目时,我们选择对应的选项, 效果: 根据上面的提示,我们已经把vue项目构建好了 ...

  5. 基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题

    背景 在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视. 所以在我们前端开发完成后,会有一些列的web应用的上线验证,如自测.QA测试.code review 等 ...

  6. 简单的利用nginx部署前端项目

    网上有很多教程写的一大堆东西,新手可能会有点看不懂,现在我写这篇文章是为了更好的帮助新手,如何将自己的前端项目部署到自己的服务器上. 首先我们必须要有一台自己的ubuntu服务器,如果没有可以去阿里云 ...

  7. .NET Core +Angular 项目 部署到CentOS

    前言: 最近公司需要开发项目能在Linux系统上运行,示例开发项目采用.Net Core + Angular开发:理论上完全支持跨平台. 但是实践才是检验真理的唯一标准:那么还是动手来验证实现下:过程 ...

  8. 基于SaaS平台的iHRM项目的前端项目介绍

    1.下载安装node.js 访问https://nodejs.org/en/,然后下载安装即可 2. 查看是否安装成功 打开cmd命令行,输入node -v 如果出现对应的版本号,即为安装成功 3.从 ...

  9. 如何使用Docker构建前端项目

    原文链接 Docker单独部署前端项目和Node项目是非常便捷的,在这里分享一下Docker的使用,主要聊聊它的部署实践.(我是window10专业版安装Docker) Docker Docker是一 ...

随机推荐

  1. 认识Backbone (一)

    Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...

  2. virus.win32.parite.H查杀病毒的方法

    virus.win32.parite.H病毒的查杀方法 昨天电脑中了virus.win32.parite.H病毒,搞了2个多小时最终搞定了.以下记录下我的解决方法. 第一步:下载Win32.Parit ...

  3. 【翻译】要理解Ext JS 5小工具

    原版的:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件. 同一时候,还 ...

  4. C语言探索之旅】 第一部分第四课第三章:变量的世界之显示变量内容

    内容简介 1.课程大纲 2.第一部分第四课第三章:变量的世界之显示变量内容 3.第一部分第五课预告:基本运算 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用 ...

  5. 使用axis公布weblogic(一个)

    1.在MyEclipse创建一个新的Web Project.新类,声明函数名称.参数,为了不写功能实体. 2.将java2wsdl.bat将文件复制到classes目录,据内部参数更改自己的实际情况 ...

  6. 【BZOJ1791】【IOI2008】【基环树】island(status第一速度)

      1791: [Ioi2008]Island 岛屿  Time Limit: 20 Sec  Memory Limit: 162 MB Submit: 908  Solved: 159 [Su ...

  7. 读书笔记之SQL注入漏洞和SQL调优

    原文:读书笔记之SQL注入漏洞和SQL调优 最近读了程序员的SQL金典这本书,觉得里面的SQL注入漏洞和SQL调优总结得不错,下面简单讨论下SQL注入漏洞和SQL调优. 1. SQL注入漏洞 由于“' ...

  8. [leetcode] Combination Sum and Combination SumII

    Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C wher ...

  9. 必须掌握的八个cmd命令

    原文:必须掌握的八个cmd命令 一.ping 它是用来检查网络是否通畅或者网络连接速度的命令.作为一个生活在网络上的管理员或者黑客来说,ping命令是第一个必须掌握的DOS命令,它所利用的原理是这样的 ...

  10. 使用Inno Setup 打包jdk、mysql、tomcat、webapp等为一个exe安装包(转)

    之前一直都没涉及到打包安装方面的东西,都是另一个同事负责的,使用的工具(installshield)也比较高大上一点,可是后来他离职以后接受的同事也只能是在这个基础上做个简单的配置,然后打包,可是现在 ...