資訊專欄INFORMATION COLUMN
摘要：前端工具查看本機安裝的的版本解析插件我們的任務是編寫一個一個插件，它能夠在源文件的頭部添加佛祖保佑，永無的字符畫。接下來使用以下的命令即可發布包到社區。關于和的選擇，我們要注意一點適合自己的才是最好的。還可以承載業務鉤子，識別前置后置。
Grunt前端工具
查看本機安裝的yeoman generator的版本:
$ npm ls -g --depth=1 2>/dev/null | grep generator-解析Grunt插件
我們的任務是編寫一個一個grunt插件，它能夠在源文件的頭部添加“佛祖保佑，永無bug”的字符畫。佛家四法印有云：“諸行無常 諸法無我 諸漏皆苦 涅槃寂靜”。在coding.net上創建grunt-buddha-fun項目，并克隆到本地。在yeoman上搜索安裝gruntplugin這個生成器。
$ cnpm i -g generator-gruntplugin
使用以上的生成器生成我們的項目代碼：
$ yo gruntplugin grunt-buddha
生成器自動為我們生成了以下的代碼：
我們將主要精力放在tasks目錄.將我們從網絡上搜集的字符畫放在此目錄：
接下來我們看一下核心代碼buddha.js,其中使用的大部分語法可以到Grunt API查看。
在這個文件中替換我們自己的配置項，完整的代碼參見grunt-buddha
修改Gruntfile.js的Buddha任務為如下：
grunt.initConfig({
// Configuration to be run (and then tested).
buddha: {
options: {
who: "girl", // buddha girl
commentSymbol: "http://"
},
dist: ["test/fixtures/*.js"]
}
});
// Actually load this plugin"s task(s).運行本地的grunt插件，不通過npm
grunt.loadTasks("tasks");
// By default, lint and run all tests.
grunt.registerTask("default", ["buddha"]);
接下來就可以運行grunt命令來將test/fixtures/*.js的頭部加上字符畫！
發布我們的項目將源碼提交到github并生成git pages。接下來將我們的包發布到npmjs.com，你需要先注冊一個賬號。接下來使用以下的npm命令即可發布npm包到npmjs社區。：
$ npm adduser $ npm publishGulp實踐
Gulp也是一個構建工具，只需要運行cnpm i -g gulp即可完成安裝。從無到有構建一個項目，我們首先應該想到在Yeoman中是否有對應的生成器。
接下來創建測試目錄并生成項目：
$ cnpm i -g generator-gulp-webapp $ mkdir gulp-demo $ cd gulp-demo && yo gulp-webapp gulp-test
接下來我們運行gulp serve可以發現和grunt serve差不多，打開了瀏覽器，修改代碼瀏覽器會實時刷新。
關于Grunt和Gulp的選擇，我們要注意一點：適合自己的才是最好的。
使用npm充當構建工具我們常用npm進行包管理，但是在package.json中的scrtpts配置項中我們也可以配置腳本來運行自己的命令，of course，它可以當做構建工具。繼續使用上面使用yeoman生成的gulp項目在package.json中添加如下的配置項：
"scripts":{
"opn":"open "http://www.baidu.com""
},
運行npm run opn將會在瀏覽器打開百度首頁。仔細觀察項目目錄下的node_modules/.bin目錄發現有一個opn文件。使用不帶任何參數的npm run命令將會列出所有可用的腳本，如下圖所示：
在scripts中我們的配置可以是$PATH環境變量中的命令或者是node_modules/.bin目錄下的可執行程序，但是如果我們想要執行jshint需要怎么辦？——只需要在項目目錄下安裝cnpm i jshint即可。
在package.json的scripts中做如下的配置：
"jshint":"jshint app/scripts/*.js"
接下來執行sudo npm run jshint即可。
同理build、serve等Grunt Task都完全可以通過npm來構建。
小知識：
npm中有幾個很常用的scripts是不需要使用run命令的，它們分別是start、test和stop。也就是說npm start和npm run start是等效的。
npm還可以承載業務鉤子，識別pre（前置）、post（后置）。
例如如下的scripts配置：
"pretest": "echo before test", "test": "echo test", "posttest": "echo after test",
執行npm test將會依次輸出“before test”、“test”、“after test”。
npm 傳遞命令行參數和配置變量引用例如package.json的scripts如下配置：
"ls":"ls -al"
運行命令npm run ls將和ls -al得到想通的效果。變量的配置如下圖所示：
注意：以上的配置并不推薦使用，因為存在跨平臺的風險，Linux和OS X的變量引用的符號是$而到了window，變量引用就變成了%。
Today is history，today we make history,today is part of history.
by 《一步之遙》
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82581.html
摘要：原作者唐斌騰訊什么原名是一個簡單易用的前端模板預編譯工具。本文作者為來自騰訊團隊的唐斌，他在本文中為我們分析了傳統前端模板內嵌的弊端，如開發調試效率低下自動化構建復雜度比較高等特點，并針對目前現狀給出了較好的解決方案。 原作者: 唐斌（騰訊）| TmodJS什么 TmodJS（原名atc）是一個簡單易用的前端模板預編譯工具。它通過預編譯技術讓前端模板突破瀏覽器限制，實現后端模板一樣的同...
摘要：如何去解決這些問題前后端分離大部分的互聯網公司都分成了前端團隊和后端團隊。方案一采用架構業界很多公司會采用，單頁應用的架構，這種架構是天然的前后端分離的。方案二淘寶的大前端方案中途島上圖是淘寶基于的前后端分離分層，以及的職責范圍。 我們遇到了什么問題？ 1.前端無法調試后端未完成的 API：如果后端同學還沒有完成 API 開發，那么前端同學就不能對這個 API 進行開發。之前我們都是在...
摘要：手把手教你做個人火的時候，隨便一個都能賺的盆滿缽滿，但是，個人沒有服務端，沒有美工，似乎就不能開發了，真的是這樣的嗎秘密花園經典的中文手冊。涵蓋前端知識體系知識結構圖書推薦以及入門視頻教程，全的簡直不要不要的了。 JavaScript 實現點擊按鈕復制指定區域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實現點擊按鈕復制區域文本的功能，不需要依賴 flash。...
摘要：前端工程化的演化。前端較為流行的單元測試，等自動化測試自動化測試是軟件通過模擬瀏覽器，對頁面進行操作，判斷是否產生預想的效果。 前端工程化 ??前端工程化的概念在近些年來逐漸成為主流構建大型web應用不可或缺的一部分，在此我通過以下這三方面總結一下自己的理解。 為什么需要前端工程化。 前端工程化的演化。 怎么實現前端工程化。 為什么需要工程化 ??隨著近些年來前端技術的不斷發展，越...
摘要：框架加冕時代年橫空出世的前端框架的模塊機制的模塊機制相比老王老李的解決方案上增強了模塊的約束性，和幫助開發者劃分模塊外，最重要的是解決了模塊的運行時管理問題模塊的初始化順序問題和依賴的模塊自動初始化問題。 前端框架工程化之路 人類的發展動力源于一個懶字，就如現在的大前端正是史前那群懶而聰明的切圖仔進了軟件工程的施工現場，懷揣著更少代碼、更少溝通、更少錯誤、更少維護的夢想奔襲而來。從框架...
摘要：框架加冕時代年橫空出世的前端框架的模塊機制的模塊機制相比老王老李的解決方案上增強了模塊的約束性，和幫助開發者劃分模塊外，最重要的是解決了模塊的運行時管理問題模塊的初始化順序問題和依賴的模塊自動初始化問題。 前端框架工程化之路 人類的發展動力源于一個懶字，就如現在的大前端正是史前那群懶而聰明的切圖仔進了軟件工程的施工現場，懷揣著更少代碼、更少溝通、更少錯誤、更少維護的夢想奔襲而來。從框架...
閱讀 3138·2021-10-12 10:11
閱讀 1840·2021-08-16 10:59
閱讀 2852·2019-08-30 15:55
閱讀 1228·2019-08-30 14:19
閱讀 2039·2019-08-29 17:03
閱讀 2472·2019-08-29 16:28
閱讀 3221·2019-08-26 13:47
閱讀 2889·2019-08-26 13:36
