当前位置: 首页 > news >正文

前端自动化解决方案

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

生成器自动为我们生成了以下的代码:

clipboard.png

我们将主要精力放在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 publish

Gulp实践

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命令将会列出所有可用的脚本,如下图所示:

npm run

在scripts中我们的配置可以是$PATH环境变量中的命令或者是node_modules/.bin目录下的可执行程序,但是如果我们想要执行jshint需要怎么办?——只需要在项目目录下安装cnpm i jshint即可。

package.jsonscripts中做如下的配置:

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

接下来执行sudo npm run jshint即可。

同理buildserve等Grunt Task都完全可以通过npm来构建。

小知识

npm中有几个很常用的scripts是不需要使用run命令的,它们分别是startteststop。也就是说npm startnpm 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得到想通的效果。变量的配置如下图所示:

在npm中配置变量引用

注意:以上的配置并不推荐使用,因为存在跨平台的风险,Linux和OS X的变量引用的符号是$而到了window,变量引用就变成了%

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

by 《一步之遥》

相关文章:

  • win2008重新生成SID
  • WebView进度条
  • GitLab安装
  • mac brew install atom atom插件的安装
  • 微服务框架lagom
  • 玩转SSH端口转发
  • Android6.0M权限管理实战,完美轻量级封装
  • AX_xSession
  • CCF NOI1049 旋转图像
  • radio checkbox 修改默认样式
  • CentOS搭建FTP
  • 黑马程序员 九、IO 操作(1)
  • 运行第一个Docker容器-Docker for Web Developers(1)
  • Linux 虚拟机--KVM安装和配置
  • 微软云Linux服务器 Mysql、tomcat远程连接错误解决办法
  • HashMap剖析之内部结构
  • javascript 哈希表
  • java中的hashCode
  • Laravel核心解读--Facades
  • React系列之 Redux 架构模式
  • SSH 免密登录
  • 程序员该如何有效的找工作?
  • 从0搭建SpringBoot的HelloWorld -- Java版本
  • 服务器之间,相同帐号,实现免密钥登录
  • 给Prometheus造假数据的方法
  • 马上搞懂 GeoJSON
  • 前端技术周刊 2019-01-14:客户端存储
  • 听说你叫Java(二)–Servlet请求
  • 小程序button引导用户授权
  • 学习HTTP相关知识笔记
  • 好程序员web前端教程分享CSS不同元素margin的计算 ...
  • ​Linux Ubuntu环境下使用docker构建spark运行环境(超级详细)
  • # Swust 12th acm 邀请赛# [ K ] 三角形判定 [题解]
  • #快捷键# 大学四年我常用的软件快捷键大全,教你成为电脑高手!!
  • #我与Java虚拟机的故事#连载08:书读百遍其义自见
  • $(function(){})与(function($){....})(jQuery)的区别
  • (Bean工厂的后处理器入门)学习Spring的第七天
  • (ibm)Java 语言的 XPath API
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY)讲解
  • (附源码)python房屋租赁管理系统 毕业设计 745613
  • (附源码)ssm基于微信小程序的疫苗管理系统 毕业设计 092354
  • (附源码)ssm捐赠救助系统 毕业设计 060945
  • (转)详解PHP处理密码的几种方式
  • .Net CF下精确的计时器
  • .NET Framework与.NET Framework SDK有什么不同?
  • .Net Web项目创建比较不错的参考文章
  • .Net 路由处理厉害了
  • .NET 依赖注入和配置系统
  • .NET国产化改造探索(三)、银河麒麟安装.NET 8环境
  • .Net转Java自学之路—基础巩固篇十三(集合)
  • .php文件都打不开,打不开php文件怎么办
  • :“Failed to access IIS metabase”解决方法
  • [145] 二叉树的后序遍历 js
  • [20181219]script使用小技巧.txt