成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端自動化解決方案

tangr206 / 2876人閱讀

摘要：前端工具查看本機(jī)安裝的的版本解析插件我們的任務(wù)是編寫一個一個插件，它能夠在源文件的頭部添加佛祖保佑，永無的字符畫。接下來使用以下的命令即可發(fā)布包到社區(qū)。關(guān)于和的選擇，我們要注意一點適合自己的才是最好的。還可以承載業(yè)務(wù)鉤子，識別前置后置。

Grunt前端工具

查看本機(jī)安裝的yeoman generator的版本:

$  npm ls -g --depth=1 2>/dev/null | grep generator-
解析Grunt插件

我們的任務(wù)是編寫一個一個grunt插件，它能夠在源文件的頭部添加“佛祖保佑，永無bug”的字符畫。佛家四法印有云：“諸行無常 諸法無我 諸漏皆苦 涅槃寂靜”。在coding.net上創(chuàng)建grunt-buddha-fun項目，并克隆到本地。在yeoman上搜索安裝gruntplugin這個生成器。

$ cnpm i -g generator-gruntplugin

使用以上的生成器生成我們的項目代碼：

$ yo gruntplugin grunt-buddha

生成器自動為我們生成了以下的代碼：

我們將主要精力放在tasks目錄.將我們從網(wǎng)絡(luò)上搜集的字符畫放在此目錄：

接下來我們看一下核心代碼buddha.js,其中使用的大部分語法可以到Grunt API查看。

在這個文件中替換我們自己的配置項，完整的代碼參見grunt-buddha

修改Gruntfile.js的Buddha任務(wù)為如下：

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的頭部加上字符畫！

發(fā)布我們的項目

將源碼提交到github并生成git pages。接下來將我們的包發(fā)布到npmjs.com，你需要先注冊一個賬號。接下來使用以下的npm命令即可發(fā)布npm包到npmjs社區(qū)。：

$ npm adduser
$ npm publish
Gulp實踐

Gulp也是一個構(gòu)建工具，只需要運行cnpm i -g gulp即可完成安裝。從無到有構(gòu)建一個項目，我們首先應(yīng)該想到在Yeoman中是否有對應(yīng)的生成器。

接下來創(chuàng)建測試目錄并生成項目：

$ cnpm i -g generator-gulp-webapp
$ mkdir gulp-demo
$ cd gulp-demo && yo gulp-webapp gulp-test

接下來我們運行gulp serve可以發(fā)現(xiàn)和grunt serve差不多，打開了瀏覽器，修改代碼瀏覽器會實時刷新。

關(guān)于Grunt和Gulp的選擇，我們要注意一點：適合自己的才是最好的。

使用npm充當(dāng)構(gòu)建工具

我們常用npm進(jìn)行包管理，但是在package.json中的scrtpts配置項中我們也可以配置腳本來運行自己的命令，of course，它可以當(dāng)做構(gòu)建工具。繼續(xù)使用上面使用yeoman生成的gulp項目在package.json中添加如下的配置項：

"scripts":{
  "opn":"open "http://www.baidu.com""
},

運行npm run opn將會在瀏覽器打開百度首頁。仔細(xì)觀察項目目錄下的node_modules/.bin目錄發(fā)現(xiàn)有一個opn文件。使用不帶任何參數(shù)的npm run命令將會列出所有可用的腳本，如下圖所示：

在scripts中我們的配置可以是$PATH環(huán)境變量中的命令或者是node_modules/.bin目錄下的可執(zhí)行程序，但是如果我們想要執(zhí)行jshint需要怎么辦？——只需要在項目目錄下安裝cnpm i jshint即可。

在package.json的scripts中做如下的配置：

"jshint":"jshint app/scripts/*.js"

接下來執(zhí)行sudo npm run jshint即可。

同理build、serve等Grunt Task都完全可以通過npm來構(gòu)建。

小知識：

npm中有幾個很常用的scripts是不需要使用run命令的，它們分別是start、test和stop。也就是說npm start和npm run start是等效的。


npm還可以承載業(yè)務(wù)鉤子，識別pre（前置）、post（后置）。

例如如下的scripts配置：

"pretest": "echo before test",
"test": "echo test",
"posttest": "echo after test",

執(zhí)行npm test將會依次輸出“before test”、“test”、“after test”。

npm 傳遞命令行參數(shù)和配置變量引用

例如package.json的scripts如下配置：

"ls":"ls -al"

運行命令npm run ls將和ls -al得到想通的效果。變量的配置如下圖所示：

注意：以上的配置并不推薦使用，因為存在跨平臺的風(fēng)險，Linux和OS X的變量引用的符號是$而到了window，變量引用就變成了%。

Today is history，today we make history,today is part of history.

by 《一步之遙》

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82581.html

相關(guān)文章

  • 基于TmodJS的前端模板工程化解決方案

    摘要：原作者唐斌騰訊什么原名是一個簡單易用的前端模板預(yù)編譯工具。本文作者為來自騰訊團(tuán)隊的唐斌，他在本文中為我們分析了傳統(tǒng)前端模板內(nèi)嵌的弊端，如開發(fā)調(diào)試效率低下自動化構(gòu)建復(fù)雜度比較高等特點，并針對目前現(xiàn)狀給出了較好的解決方案。 原作者: 唐斌（騰訊）| TmodJS什么 TmodJS（原名atc）是一個簡單易用的前端模板預(yù)編譯工具。它通過預(yù)編譯技術(shù)讓前端模板突破瀏覽器限制，實現(xiàn)后端模板一樣的同...

    zhaochunqi 評論0 收藏0

  • 前后分離的總結(jié)

    摘要：如何去解決這些問題前后端分離大部分的互聯(lián)網(wǎng)公司都分成了前端團(tuán)隊和后端團(tuán)隊。方案一采用架構(gòu)業(yè)界很多公司會采用，單頁應(yīng)用的架構(gòu)，這種架構(gòu)是天然的前后端分離的。方案二淘寶的大前端方案中途島上圖是淘寶基于的前后端分離分層，以及的職責(zé)范圍。 我們遇到了什么問題？ 1.前端無法調(diào)試后端未完成的 API：如果后端同學(xué)還沒有完成 API 開發(fā)，那么前端同學(xué)就不能對這個 API 進(jìn)行開發(fā)。之前我們都是在...

    enrecul101 評論0 收藏0

  • 前端基礎(chǔ)入門

    摘要：手把手教你做個人火的時候，隨便一個都能賺的盆滿缽滿，但是，個人沒有服務(wù)端，沒有美工，似乎就不能開發(fā)了，真的是這樣的嗎秘密花園經(jīng)典的中文手冊。涵蓋前端知識體系知識結(jié)構(gòu)圖書推薦以及入門視頻教程，全的簡直不要不要的了。 JavaScript 實現(xiàn)點擊按鈕復(fù)制指定區(qū)域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實現(xiàn)點擊按鈕復(fù)制區(qū)域文本的功能，不需要依賴 flash。...

    shinezejian 評論0 收藏0

  • 前端工程化/構(gòu)建自動化

    摘要：前端工程化的演化。前端較為流行的單元測試，等自動化測試自動化測試是軟件通過模擬瀏覽器，對頁面進(jìn)行操作，判斷是否產(chǎn)生預(yù)想的效果。 前端工程化 ??前端工程化的概念在近些年來逐漸成為主流構(gòu)建大型web應(yīng)用不可或缺的一部分，在此我通過以下這三方面總結(jié)一下自己的理解。 為什么需要前端工程化。 前端工程化的演化。 怎么實現(xiàn)前端工程化。 為什么需要工程化 ??隨著近些年來前端技術(shù)的不斷發(fā)展，越...

    JasonZhang 評論0 收藏0

  • 前端框架的工程化之路

    摘要：框架加冕時代年橫空出世的前端框架的模塊機(jī)制的模塊機(jī)制相比老王老李的解決方案上增強(qiáng)了模塊的約束性，和幫助開發(fā)者劃分模塊外，最重要的是解決了模塊的運行時管理問題模塊的初始化順序問題和依賴的模塊自動初始化問題。 前端框架工程化之路 人類的發(fā)展動力源于一個懶字，就如現(xiàn)在的大前端正是史前那群懶而聰明的切圖仔進(jìn)了軟件工程的施工現(xiàn)場，懷揣著更少代碼、更少溝通、更少錯誤、更少維護(hù)的夢想奔襲而來。從框架...

    whatsns 評論0 收藏0

  • 前端框架的工程化之路

    摘要：框架加冕時代年橫空出世的前端框架的模塊機(jī)制的模塊機(jī)制相比老王老李的解決方案上增強(qiáng)了模塊的約束性，和幫助開發(fā)者劃分模塊外，最重要的是解決了模塊的運行時管理問題模塊的初始化順序問題和依賴的模塊自動初始化問題。 前端框架工程化之路 人類的發(fā)展動力源于一個懶字，就如現(xiàn)在的大前端正是史前那群懶而聰明的切圖仔進(jìn)了軟件工程的施工現(xiàn)場，懷揣著更少代碼、更少溝通、更少錯誤、更少維護(hù)的夢想奔襲而來。從框架...

    fnngj 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<