摘要：前端工具查看本机安装的的版本解析插件我们的任务是编写一个一个插件，它能够在源文件的头部添加佛祖保佑，永无的字符画。接下来使用以下的命令即可发布包到社区。关于和的选择，我们要注意一点适合自己的才是最好的。还可以承载业务钩子，识别前置后置。
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: "//"
},
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 《一步之遥》
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82581.html
摘要：原作者唐斌腾讯什么原名是一个简单易用的前端模板预编译工具。本文作者为来自腾讯团队的唐斌，他在本文中为我们分析了传统前端模板内嵌的弊端，如开发调试效率低下自动化构建复杂度比较高等特点，并针对目前现状给出了较好的解决方案。 原作者: 唐斌（腾讯）| TmodJS什么 TmodJS（原名atc）是一个简单易用的前端模板预编译工具。它通过预编译技术让前端模板突破浏览器限制，实现后端模板一样的同...
摘要：如何去解决这些问题前后端分离大部分的互联网公司都分成了前端团队和后端团队。方案一采用架构业界很多公司会采用，单页应用的架构，这种架构是天然的前后端分离的。方案二淘宝的大前端方案中途岛上图是淘宝基于的前后端分离分层，以及的职责范围。 我们遇到了什么问题？ 1.前端无法调试后端未完成的 API：如果后端同学还没有完成 API 开发，那么前端同学就不能对这个 API 进行开发。之前我们都是在...
摘要：手把手教你做个人火的时候，随便一个都能赚的盆满钵满，但是，个人没有服务端，没有美工，似乎就不能开发了，真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程，全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖 flash。...
摘要：前端工程化的演化。前端较为流行的单元测试，等自动化测试自动化测试是软件通过模拟浏览器，对页面进行操作，判断是否产生预想的效果。 前端工程化 前端工程化的概念在近些年来逐渐成为主流构建大型web应用不可或缺的一部分，在此我通过以下这三方面总结一下自己的理解。 为什么需要前端工程化。 前端工程化的演化。 怎么实现前端工程化。 为什么需要工程化 随着近些年来前端技术的不断发展，越...
摘要：框架加冕时代年横空出世的前端框架的模块机制的模块机制相比老王老李的解决方案上增强了模块的约束性，和帮助开发者划分模块外，最重要的是解决了模块的运行时管理问题模块的初始化顺序问题和依赖的模块自动初始化问题。 前端框架工程化之路 人类的发展动力源于一个懒字，就如现在的大前端正是史前那群懒而聪明的切图仔进了软件工程的施工现场，怀揣着更少代码、更少沟通、更少错误、更少维护的梦想奔袭而来。从框架...
摘要：框架加冕时代年横空出世的前端框架的模块机制的模块机制相比老王老李的解决方案上增强了模块的约束性，和帮助开发者划分模块外，最重要的是解决了模块的运行时管理问题模块的初始化顺序问题和依赖的模块自动初始化问题。 前端框架工程化之路 人类的发展动力源于一个懒字，就如现在的大前端正是史前那群懒而聪明的切图仔进了软件工程的施工现场，怀揣着更少代码、更少沟通、更少错误、更少维护的梦想奔袭而来。从框架...
阅读 2936·2021-10-12 10:11
阅读 382·2021-09-06 15:01
阅读 1701·2021-08-16 10:59
阅读 2665·2019-08-30 15:55
阅读 1042·2019-08-30 14:19
阅读 1915·2019-08-29 17:03
阅读 2331·2019-08-29 16:28
阅读 3083·2019-08-26 13:47
