tomcat部署web項目步驟，【Yeoman】熱部署web前端開發環境

2023-12-06 阅读 24 评论 0

摘要：本文來自 “簡時空”：《【Yeoman】熱部署web前端開發環境》（自動同步導入到博客園） 1、序言 ? ? ? ? 記得去年的暑假看RequireJS的時候，曾少不更事般地驚為前端利器，寫了《Speed up! 提速你的網站訪問速度[壓縮JS與CSS]》。隨著學習的深入

本文來自 “簡時空”：《【Yeoman】熱部署web前端開發環境》（自動同步導入到博客園）

1、序言

? ? ? ? 記得去年的暑假看RequireJS的時候，曾少不更事般地驚為前端利器，寫了《Speed up! 提速你的網站訪問速度[壓縮JS與CSS]》。隨著學習的深入，發現前端的還有許多東西需要整合，純手工勞動無疑降低了開發效率。這四天的工作，真是把這兩年所學習到的知識綜合應用了一番：

?軟實力層面包括：使用Photoshop+Bootstrap3+Grid System 設計頁面UI圖；

工具語言包括：CoffeeScript、LESS、Handlebars等；

tomcat部署web項目步驟。圖形庫的使用：Highchart、jvectorMap、D3等這些一年前就開始用的庫

?>>>>> 頁面效果：http://www.janscon.com/weibo/index.html <<<<

? ? ? ? 當然重點不在于這個，這次學習的重點在于使用Yeoman熱部署了前端環境，使用Grunt、NPM、Bower等工具起“穿針引線”作用將這些技術互相聯系起來，使得前端的開發從未如此“一氣呵成”~

? ? ? ? 既然這些工具都把重要的工作做了，那么作為程序猿的我意義何在呢？

? ? ? ? 呃~ OK，“我們不生產代碼，我們只是英文字母的搬運工而已啦”

? ? ? ? 這幾天的工作還是留下遺憾的，就是沒能用上前端自動化測試工具——以后得好好學習Qunit+Mocha+ Selenium這些玩意兒了

web前端開發、?

2、工作準備

? ? ? ? 如果讀者對Grunt、Yeoman還不是很了解，建議先參看這幾篇文章，非常適合入門：

① Xianjing.《Grunt - 基于任務的Javascript構建工具》. 2013-05-16

② RIA之家. 《前端項目可以更簡單—Yeoman入門指南》.2013-4-25

③ 阮一峰. 《任務管理工具Grunt》.

nodejs搭建web服務器？上面這三篇文章已經將Yeoman、Grunt等語法講解非常明了了，所以我的文章里就不在這些方面多費口舌。這里將只重點講解我工作的流程，作文以記之。

找到目標：如何使用Yeoman搭建單頁面、多頁面的開發環境

使用工具：Bootstrap（基于LESS）、Handlebars、CoffeeScript，使用RequireJS組織JS代碼

示例代碼：

本文所講的程序代碼可以從這兒下載：

tomcat生產環境下怎么部署的，① 單頁面前端環境搭建示例代碼：jscon-single-page.zip （百度云盤）

② 多頁面前端環境搭建示例代碼：jscon-multi-pages.zip （百度云盤）

3、構建單頁面開發環境

3.1、使用Bootstrap-less生成器

? ? ? ? 使用Yeoman入門的時候，使用的webapp這個生成器，不過里面的Bootstrap是基于SASS的。個人傾向于使用LESS語言的，畢竟它是基于我熟悉的Node環境而非Ruby。

Step 1: 安裝Bootstrap-less生成器

npm install generator-bootstrap-less

Step 2: 生成程序腳手架

yo bootstrap-less

java項目部署到服務器上，Step 3: 代碼熱部署

grunt server

? Yeoman默認的歡迎界面 ?

看到這個自動跳出來的 “Allo，“Allo! 頁面，說明已經成功搭建環境了。可以開始在這個基礎上編寫代碼，只是我還有使用Handlebars以及RequireJS，所以還得自己安裝這些組件。

? ? ? ? 在繼續之前，在這里順便對比一下webapp與bootstrap-less這兩個腳手架的區別：?

除了基本的Bootstrap外，webapp有Modernizr和RequireJS, 而bootstrap-less則只有FontAwesome

如果除去我想要的Bootstrap之外，bootstrap-less生成器是一無所有啊（Bootstrap的JS文件和FontAwesome都勾上吧，因為都要用到的），而webapp還有RequireJS和Modernizr呢，顯然是“高富帥”一枚。

node web框架？? ? ? ? 不過我還是選bootstrap-less，因為它使用的是LESS而不是SASS（我難道有強迫癥？）；至于RequireJS和Modernizr的使用可以借鑒webapp生成的index.html中寫法即可——我就是這么干的！

3.2、引入Handlebars

? ? ? ? 引入Handlebars是看中了它使用方便且能夠預編譯這兩優點的。一般使用bower工具引入所需要的包，不過Handlebar是個例外，這是因為官方Github并不提供現成的前端頁面的Handlebar.js文件，需要通過其文檔主頁到Amazon的S3平臺（http://handlebarsjs.com/）上下載；所以不要使用bower install handlebar.js命令

在模板預編譯的時候是需要借助Node環境，所以使用npm安裝Handlebars插件：

Step 1: ?使用npm，下載contrib模塊

npm install --save-dev? grunt-contrib-handlebars?

weblog部署，Step 2:? 同時在Gruntfile.js中注冊下面的Task：

（在Gruntfile.js文件中修改）

    handlebars:{dist: {options: {namespace: "JST",wrapped:true},// files: {"<%= yeoman.app %>/hbs/templates.js":["<%= yeoman.app %>/hbs/*.hb"]}expand:true,   src:"<%= yeoman.app %>/hbs/*.hb",ext:".js"}}

?默認的namespace是“Handlebars.templates”，后期使用uglify.js進行優化的時候會將Handlebars用變量“a”（或者其他名字）代替，從而提示該變量沒有templates屬性；因此推薦像上面那樣使用“JST”等作為命名空間。

Step 3: 還需要配置編譯及livereload功能

? ? ? ? ?首先在watch任務中添加對.hb文件的監視即可

（在Gruntfile.js文件中修改）

    watch: {handlebars:{files:['<%= yeoman.app %>/hbs/{,*/}*.hb'],tasks:['handlebars']},….livereload: {files: ['<%= yeoman.app %>/*.html','{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css','{.tmp,<%= yeoman.app %>}/{scripts,hbs}/{,*/}*.js','<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'],tasks: ['livereload']}},

??Step 4: 注冊預編譯任務

部署web服務器，? ? ? ? 在concurrent任務中注冊handlebars任務，確保項目發布的時候所有模板都經過編譯：

（在Gruntfile.js文件中修改）

    concurrent: {dist: ['handlebars','coffee','recess','imagemin','svgmin','htmlmin']}?

配置完后，這里就簡單的舉個例子表明如何使用：

Step 1：創建模板

創建hbs文件夾，并在其下面新建一個messages.hb文件，此時文件夾結構如下：

創建hbs文件夾，與index.html處于同一級并在hbs文件夾下創建messages.hb模板文件

messages.hb內容如下：

   {{#messages}}<div class="message"><h2 class="name">{{name}}</h2><div class="msgContent">{{msgContent}}</div><div class="msgTime">{{msgTime}}</div></div>{{/messages}}

??Step 2：添加JS代碼

先在index.html頁面中添加ID為“list”的空白DIV：

再在index.html文件中添加runtime.js官方文件，以及messages.js文件（注意不是messages.hb文件，熱部署的時候會自動調用Node將其編譯成messages.js文件）：

（在app/index.html文件中修改）

<!-- build:js scripts/main.js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="scripts/lib/handlebars/handlebars.runtime-v1.1.2.js"></script>
<script type="text/javascript" src="hbs/messages.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->

??其中的main.js是邏輯實現代碼：

app/scripts/main.js

$(function(){var data = {messages:[{name:"Zhang",msgContent:"I'm San",msgTime:"Yesterday"},{name:"Li",msgContent:"I'm Si",msgTime:"Today"},{name:"Wang",msgContent:"I'm Wu",msgTime:"Tomorrow"}],name:"jscon"};var template = JST["app/hbs/messages.hb"];console.log(template)$("#list").html(template(data));
});

?這里下劃線標出的：

var template = JST["app/hbs/messages.hb"];

需要注意兩個地方，一個是命名空間“JST”要與配置文件中保持一致；另外一個當調用模板的時候注意路徑是相對app的路徑。至于如何去掉“app/hbs”這個路徑，目前還不知道如何解決。

Step 3：查看效果

在程序根目錄下運行：

grunt server

發現還是之前的頁面，調出chrome console會提示找不到“messages.js”文件；好吧下面見證奇跡的時刻，打開messages.hb文件，直接按下“Ctrl+S”保存文件，觸發watch任務，其中就包括執行handlebars任務（其他的還有coffee、recess任務），然后自動執行livereload任務刷新頁面。現在看看效果頁面：

使用模板后的效果頁面

參考文章：

[1] 官方Github文檔《grunt-contrib-handlebars》

[2] 官方Grunt文檔：https://npmjs.org/package/grunt-contrib-handlebars

3.3、使用RequireJS組織JS文件

? ? ? ? 我們看看現在的index.html頁面的截圖：

簡單的index.html頁面需要加載2項個人JS文件，14項庫文件

可以看到這么簡單的頁面里面有一大串的JS文件需要加載，主要包括：

? ? ? ? 1）個人的JS文件，比如上節講的模板文件（message.js）和邏輯文件（main.js）。

? ? ? ? 2）官方的JS庫文件，比如jQuery、還有許多BootStrap需要的組件JS文件；

通過RequireJS組織JS文件，到時就只用一句話就夠了：

<!-- build:js scripts/main.js -->
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->

?Step 1：安裝RequireJS包

bower install --save requirejs

執行此語句之后，就會自動更新bower.json文件，同時在app/bower_components中下載官方的requirejs組件。?

Step 2：添加RequireJS的Node模塊

npm install grunt-contrib-requirejs --save-dev

這樣能夠將grunt-contrib-requirejs組件自動下載到node_modules文件夾下，同時因為使用了--save-dev會自動更新package.json文件。

官方文檔：https://github.com/gruntjs/grunt-contrib-requirejs

?Step 3：修改Gruntfils.js文件，配置requirejs任務

為了能夠利用RequireJS的r.js文件對輸出文件進行優化，需要在Gruntfiles.js中注冊相應任務。關于r.js的詳細配置可以參考官方示例：

（在Gruntfile.js文件中修改）

requirejs: {dist: {// Options: https://github.com/jrburke/r.js/blob/master/build/example.build.jsoptions: {// `name` and `out` is set by grunt-useminbaseUrl: yeomanConfig.app + '/scripts',mainConfigFile:'<%= yeoman.app %>/scripts/config.js',              optimize: 'none',// TODO: Figure out how to make sourcemaps work with grunt-usemin// https://github.com/yeoman/grunt-usemin/issues/30//generateSourceMaps: true,// required to support SourceMaps// http://requirejs.org/docs/errors.html#sourcemapcommentspreserveLicenseComments: false,useStrict: true,wrap: true//uglify2: {} // https://github.com/mishoo/UglifyJS2}}},

?這里的config.js是專門的RequireJS配置文件，主要是所有文件中的依賴關系，配置了paths和shim項：

app/scripts/config.coffee

require.configpaths:## jQuery'jquery':'../bower_components/jquery/jquery'## BootStrap'bootstrap-affix': "../bower_components/bootstrap/js/affix"'bootstrap-transition': "../bower_components/bootstrap/js/transition""bootstrap-alert": "../bower_components/bootstrap/js/alert""bootstrap-button": "../bower_components/bootstrap/js/button""bootstrap-collapse": "../bower_components/bootstrap/js/collapse""bootstrap-dropdown": "../bower_components/bootstrap/js/dropdown""bootstrap-modal": "../bower_components/bootstrap/js/modal""bootstrap-tooltip": "../bower_components/bootstrap/js/tooltip""bootstrap-popover": "../bower_components/bootstrap/js/popover""bootstrap-scrollspy": "../bower_components/bootstrap/js/scrollspy""bootstrap-tab": "../bower_components/bootstrap/js/tab""bootstrap-carousel": "../bower_components/bootstrap/js/carousel"## Handlebars runtime'runtime':'lib/handlebars/handlebars.runtime-v1.1.2'## Templates'messages':'../hbs/messages'

?Step 4：將requirejs添加build任務中

為了能夠在發布時，使用r.js進行頁面優化（合并、壓縮等），需要將requirejs任務作為build任務的子任務：

（在Gruntfile.js文件中修改）

grunt.registerTask('build', ['clean:dist','useminPrepare','concurrent:dist','autoprefixer','requirejs','concat','cssmin','uglify','modernizr','copy:dist','rev','usemin']);

??Step 5：重新組織index.html頁面中的js文件

接下來刪除Figure 9中的所有script標簽，代之以下面的語句：

（在app/index.html文件中修改）

<!-- build:js scripts/main.js -->
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->

?入口文件還是main.js，只是現在改成RequireJS要求的格式：

app/scripts/main.coffee

require.configpaths:'jquery':'../bower_components/jquery/jquery','runtime':'lib/handlebars/handlebars.runtime-v1.1.2','messages':'../hbs/messages'require ['jquery','runtime','messages','bootstrap'],($)->'use strict';$ ->data = messages:[{name:"Zhang",msgContent:"I'm San",msgTime:"Yesterday"}{name:"Li",msgContent:"I'm Si",msgTime:"Today"}{name:"Wang",msgContent:"I'm Wu",msgTime:"Tomorrow"}]name:"jscon"template = JST["app/hbs/messages.hb"]$("#list").html(template(data))

?注意這里的bootstrap依賴文件用來配置需要哪些bootstrap組件用的，可以自己定制所需要的插件內容，挺方便的。這里給出最全的配置，內容如下：（參考自https://gist.github.com/taxilian/4790603）

app/scripts/bootstrap.coffee

require.configpaths:'jquery':'../bower_components/jquery/jquery','bootstrap-affix':"../bower_components/bootstrap/js/affix",'bootstrap-transition':"../bower_components/bootstrap/js/transition","bootstrap-alert":"../bower_components/bootstrap/js/alert","bootstrap-button":"../bower_components/bootstrap/js/button","bootstrap-collapse":"../bower_components/bootstrap/js/collapse","bootstrap-dropdown":"../bower_components/bootstrap/js/dropdown","bootstrap-modal":"../bower_components/bootstrap/js/modal","bootstrap-tooltip":"../bower_components/bootstrap/js/tooltip","bootstrap-popover":"../bower_components/bootstrap/js/popover","bootstrap-scrollspy":"../bower_components/bootstrap/js/scrollspy","bootstrap-tab":"../bower_components/bootstrap/js/tab","bootstrap-carousel":"../bower_components/bootstrap/js/carousel"shim:"bootstrap-affix": ["jquery"],"bootstrap-transition": ["bootstrap-affix"],"bootstrap-alert": ["bootstrap-transition"],"bootstrap-button": ["bootstrap-alert"],"bootstrap-collapse": ["bootstrap-button"],"bootstrap-dropdown": ["bootstrap-collapse"],"bootstrap-modal": ["bootstrap-dropdown"],"bootstrap-tooltip": ["bootstrap-modal"],"bootstrap-popover": ["bootstrap-tooltip"],"bootstrap-scrollspy": ["bootstrap-popover"],"bootstrap-tab": ["bootstrap-scrollspy"],"bootstrap-carousel": ["bootstrap-tab"]                
define ['jquery',"bootstrap-affix","bootstrap-transition","bootstrap-alert","bootstrap-button","bootstrap-collapse","bootstrap-dropdown","bootstrap-modal","bootstrap-tooltip","bootstrap-popover","bootstrap-scrollspy","bootstrap-tab","bootstrap-carousel"],($)->

?至此配置完成，在命令行中輸入 grunt server 就可以看到以前熟悉的頁面了，沒錯，you make it！

3.4、發布程序

? ? ? ? 程序的發布，使用

grunt build --force? 或者? grunt --force

加force選項的目的是為了在執行任務時的出現warning提示時，并不中斷任務的執行而是繼續執行到完成（或出現Error）。

? ? ? ?此時你會在根目錄下出現一個dist文件夾，這個文件夾的結構和app文件夾相似

可以發布的dist文件夾與開發時的app文件夾結構基本相似

? ? ? ? 可以發現只有一個js文件和css文件，都是經過壓縮的。js的壓縮是RequireJS、concat和uglify共同的作用結果，css的壓縮則是concat和cssmin的作用結果。使用RequireJS會根據入口文件main.js中找到所有的依賴，然后合并成一個大的main.js文件：?

運行requirejs任務時會根據依賴合并成一個總的main.js文件 ?

這個dist文件夾就是可以發布的版本了，（改個名字后）扔到服務器上就可以了。

4、構建多頁面前端環境

? ? ? ? 還記得小時候看過的童話故事中的那只偷香油的小老鼠么？有時候，一種優勢在另外一種情況下就成了弊端。上面我們講的usemin就是這個一個情況。

? ? ? ? 我們回過頭來看發布時命令窗口中的幾行提示：

提示正在更新Gruntfile.js的cssmin、concat、uglify和requirejs任務配置的內容

這些反饋信息都來自usemin的工作，usemin組件能夠自動更新Gruntfile中諸如concat、uglify、requirejs的配置文件，所以前面我們在單頁面環境時根本不用考慮如何合并、壓縮文件，因為usemin默默地幫你完成了——真是人民的好公仆呢。

? ? ? ? usemin所做的工作對單頁面來講非常有用，增加了配置過程的自動化。不過在RequireJS用于多頁面開發時，需要使用dir以及modules配置，但是usemin“仍然不知情”，還是會自動給requirejs任務添加name屬性和out屬性（單頁面配置），從而導致配置沖突。

? ? ? ? 要想自動部署多頁面，那么只能忍痛割愛拋棄usemin組件，需要自己寫concat和uglify任務，還好這些都不難。在前面單頁面環境搭建的基礎上，配置多頁面環境也是非常方便快捷的。

4.1、拋棄usemin任務

? ? ? ? 因為usemin和requirejs任務都是用于發布時執行的，所以只要在build任務中除名即可，除名之后build任務的配置如下：

grunt.registerTask('build', ['clean:dist','copy:server','concurrent','requirejs','cssmin','concat','uglify','copy']);

4.2、修改requirejs任務

? ? ? ? 修改requirejs任務，添加用于多任務的dir和modules配置：

（在Gruntfile.js文件中修改）

 requirejs: {dist: {…baseUrl:'<%= yeoman.app %>/scripts',                mainConfigFile:'<%= yeoman.app %>/scripts/config.js',             optimize: 'none',dir: '.tmp/scripts/requirejs/',modules:[{name:"main"},{name:"main2"}],…}},

?注意

① 輸出的文件暫時放在 .tmp臨時文件夾下，這樣到時clean任務會清空這個臨時文件夾。

② 這里的modules中模塊的名字都是以“main”開頭的，是為了方便后面concat任務找文件。

4.3、修改concat、uglify任務

? ? ? ? 移走了usemin任務之后，concat和uglify需要自己定制。其實concat任務更像是copy功能，因為合并的工作已經由requirejs做了。

（在Gruntfile.js文件中修改）

concat:{dist:{expand:true,cwd:".tmp/scripts/requirejs/",src:['main*.js'],dest:'<%= yeoman.dist %>/scripts/',ext:'.js'},dep:{files:{"<%= yeoman.dist %>/scripts/vendor/modernizr.js":["<%= yeoman.app %>/bower_components/modernizr/modernizr.js"],'<%= yeoman.dist %>/bower_components/requirejs/require.js':['<%= yeoman.app %>/bower_components/requirejs/require.js']}}
},

??這里的“dist”任務是用來搬運的之前requirejs放在.tmp中的入口文件（main*.js）到結果文件夾dist下。而“dep”任務則是搬運其他需要的js文件，這里是modernizr.js和require.js兩個文件。??

? ? ? ? 由于requirejs和concat已經把該合并的文件都放到目標文件下面去了，所以uglify的任務就非常簡單了，把這些目標文件下的文件“就地”壓縮一下即可：

uglify: {src:['<%= yeoman.dist %>/{,*/}*.js']
},

4.4、測試

? ? ? ??把index.html另存一份為index2.html，并將其中的入口文件改成main2：

<script data-main="scripts/main2" src="bower_components/requirejs/require.js"></script>

?然后把main.js另存為一份main2.js。接下去使用 grunt --force 發布程序，可以看到效果。

多頁面開發效果圖

參考文獻：

[1] 科學的愛情. 《Grunt + RequireJS with multi-page website》. 2013-03-11

[2] Xianjing《玩轉Grunt（一）: Minification》.2013-10-7

最后友情提醒一句，本文所講的程序代碼可以從這兒下載：

單頁面前端環境搭建示例代碼：jscon-single-page.zip

多頁面前端環境搭建示例代碼：jscon-multi-pages.zip

~~The End~~

轉載于:https://www.cnblogs.com/boychenney/p/yeoman_in_action.html

原文链接：https://hbdhgg.com/5/192859.html

上一篇：廣告聯盟有哪些平臺，國內10大廣告聯盟各自有哪些優勢？

下一篇：LEETCODE，[LeetCode]Link List Cycle

标签：tomcat部署web項目步驟 web前端開發 nodejs搭建web服務器 tomcat生產環境下怎么部署的 java項目部署到服務器上 node web框架 weblog部署部署web服務器

tomcat部署web項目步驟

发表评论:

tomcat部署web項目步驟，【Yeoman】熱部署web前端開發環境

1、序言

2、工作準備

3、構建單頁面開發環境

3.1、使用Bootstrap-less生成器

3.2、引入Handlebars

3.3、使用RequireJS組織JS文件

3.4、發布程序

4、構建多頁面前端環境

4.1、拋棄usemin任務

4.2、修改requirejs任務

4.3、修改concat、uglify任務

4.4、測試

简单认识生命周期

前期准备