使用Grunt构建自动化开发环境

1、准备工作

1)首页确保电脑上网,以及能够访问https://registry.npmjs.org/,因需从此网站中下载安装相应的插件;

2)电脑安装Node.js,Grunt及Grunt插件都是基于node.js运行的;如果你电脑上未装node.js,到nodejs官网https://nodejs.org/下载相应版本安装吧;

3)安装grunt-CLI,要想使用grunt,需要将grunt-CLI安装到全局环境中,使用nodejs的”npm install”进行安装;

打开控制台(windows系统下使用管理员权限打开),输入:npm install –g grunt-cli,然后敲击回车。

要检查是否已经安装grunt-cli并生效,只需输入grunt命令,敲击回车,如果出现下图结果,即表示你已成功安装grunt-cli。

QQ截图20151020113729

2、创建一个简单的测试

在本机的项目目录中创建GruntTest目录(包括build,src,test,node_modules为安装插件时自动生成),两个文件(Gruntfile.js,package.json,注意第一个文件名首字母大写)。

QQ截图20151020113941

其中package.json格式如下:

3、安装Grunt

从控制台中进入到刚才创建的目录中,输入以下命令:npm install grunt --save-dev(注意save前是两个-),其中--save-dev的意思是在安装grunt的同时,把grunt保存为这个目录的开发依赖项。这个依赖项的配置即为package.json中的devDependencies对应的配置。

grunt安装成功之后,在package.json文件中的devDependencies属性中会自动添加上"grunt": "^0.4.5"。目录中会自动创建node_modules文件夹,其中会有一个grunt的文件夹。

4、配置Gruntfile.js文件

首先把Gruntfile.js配置成如下格式:

QQ截图20151020114925

}, build:{ src:'src/test.js',//原文件路径 dest:'build/js/<%=pkg.name%>-<%=pkg.version%>.min.js'//压缩后文件路径 } }, //CSS文件压缩 cssmin: { options: { shorthandCompacting: false, roundingPrecision: -1 }, target: { /*files: { 'output.css': ['foo.css', 'bar.css']//合并两个文件到一个文件 }*/ files: [{ expand: true, cwd: 'src/',//原文件目录 src: ['*.css', '!*.min.css'], dest: 'build/css',//压缩后文件目录 ext: '.min.css' }] } }, //JS文件错误提示 jshint:{ build:['Gruntfile.js','src/*.js'], options:{ jshintrc:'g.jshintrc' } }, watch: { scripts: { files: ['src/*.js','src/*.css'], tasks: ['jshint','uglify','cssmin'], options: { spawn: false } } } }); //告诉grunt我们将要加载的插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); //告诉grunt当我们在终端中输入grunt时需要做哪些操作(注意先后顺序) grunt.registerTask('default',['jshint','uglify','cssmin','watch']); };
复制代码

5、Grunt插件安装

进入grunt官网的插件列表页面 http://www.gruntjs.net/plugins ,我们能看到grunt到目前为止的所有插件。

插件分为两类。第一类是grunt团队贡献的插件,这些插件的名字前面都带有“contrib-”前缀,而且在插件列表中有星号标注。第二类是第三方提供的插件,不带有这两个特征。

  • Contrib-jshint——javascript语法错误检查;
  • Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
  • Contrib-clean——清空文件、文件夹;
  • Contrib-uglify——压缩javascript代码
  • Contrib-copy——复制文件、文件夹
  • Contrib-concat——合并多个文件的代码到一个文件中
  • karma——前端自动化测试工具

安装插件命令为:npm install grunt-contrib-uglify --save-dev格式。

6、使用uglify插件

Uglify插件的功能就是压缩javascript代码。安装方式:npm install grunt-contrib-uglify --save-dev,安装成功之后package.json文件会自动添加相应配置,node_modules目录中也会创建相应的插件目录。

使用uglify来压缩javascript代码,首先在src目录中创建一个”test.js”

 

QQ截图20151020122600

复制代码
/**
* Created by Jack on 2015-10-20.
*/
(function(window,undefined){ function add(a,b){ return a+b; } add(10,20); })(window); function test(a,b,c){ return a+b*c; }
复制代码

第一步:在Gruntfile.js中进行配置。

QQ截图20151020122655

}, build:{ src:'src/test.js',//原文件路径 dest:'build/js/<%=pkg.name%>-<%=pkg.version%>.min.js'//压缩后文件路径 } }, //CSS文件压缩 cssmin: { options: { shorthandCompacting: false, roundingPrecision: -1 }, target: { /*files: { 'output.css': ['foo.css', 'bar.css']//合并两个文件到一个文件 }*/ files: [{ expand: true, cwd: 'src/',//原文件目录 src: ['*.css', '!*.min.css'], dest: 'build/css',//压缩后文件目录 ext: '.min.css' }] } }, //JS文件错误提示 jshint:{ build:['Gruntfile.js','src/*.js'], options:{ jshintrc:'g.jshintrc' } }, watch: { scripts: { files: ['src/*.js','src/*.css'], tasks: ['jshint','uglify','cssmin'], options: { spawn: false } } } }); //告诉grunt我们将要加载的插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); //告诉grunt当我们在终端中输入grunt时需要做哪些操作(注意先后顺序) grunt.registerTask('default',['jshint','uglify','cssmin','watch']); };
复制代码

 

对uglify的配置有两项:

  “options”中规定允许生成的压缩文件带banner,即在生成的压缩文件第一行加一句话说明。注意,其中使用到了pkg获取package.json的内容。

  “build”中配置了源文件和目标文件。即规定了要压缩谁?压缩之后会生成谁?注意,我们这里将目标文件的文件名通过pkg的name和version来命名。

(PS:上文中说过的package.json的内容终于找到了他被应用的地方了。这样的好处是:例如,对文件版本的管理,你只需要在package.json中修改即可,grunt会自动根据最新的版本号生成相应版本的文件。你不用手动去修改文件的文件名。)

第二步:在 grunt.initConfig 方法之后,要让grunt去加载这一个插件。光配置了,不加载上,如何用啊?

grunt.loadNpmTasks('grunt-contrib-uglify');
第三步:在grunt命令执行时,要不要立即执行uglify插件?如果要,就写上,否则不写。我现在是需要的,所以我写上。也有可能不需要,这种情况谁知道呢?
grunt.registerTask('default',['uglify']);

7、其它插件

如果使用其它插件,可先进行安装,然后进行配置,加载插件,注册任务插件。具体使用说明可进入http://www.gruntjs.net/plugins网站中点击相应的插件查看相应的配置说明。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/544052.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试突击66:请求转发和请求重定向有什么区别?

作者 | 磊哥来源 | Java面试真题解析&#xff08;ID&#xff1a;aimianshi666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;在 Java 中&#xff0c;跳转的实现方式有两种&#xff1a;请求转发和请求重定向&#xff0c;但二者是完全不同的&…

99%的Java程序员会踩的6个坑

前言作为Java程序员的你&#xff0c;不知道有没有踩过一些基础知识的坑。有时候&#xff0c;某个bug&#xff0c;你查了半天&#xff0c;最后发现竟然是一个非常低级的错误。有时候&#xff0c;某些代码&#xff0c;这一批数据功能正常&#xff0c;但换了一批数据就出现异常了。…

BigDecimal 的 4 个坑,你踩过几个?

背景 一直从事金融相关项目&#xff0c;所以对BigDecimal再熟悉不过了&#xff0c;也曾看到很多同学因为不知道、不了解或使用不当导致资损事件发生。所以&#xff0c;如果你从事金融相关项目&#xff0c;或者你的项目中涉及到金额的计算&#xff0c;那么你一定要花时间看看这篇…

Windows Server 2012 R2 里面如何安装Net Framework 3.5

图示 不要慌&#xff0c;和windows是不一样的&#xff0c;没有问题 下一步 默认即可&#xff0c;下一步 这里面的东西以后会装&#xff0c;先不管&#xff0c;我们今天目的是装 net framework 3.5 选一下 正在安装 如果出错了请参考&#xff1a; http://www.2cto.com/os/201410…

聊聊Java中代码优化的30个小技巧

今天我们一起聊聊Java中代码优化的30个小技巧&#xff0c;希望会对你有所帮助。1.用String.format拼接字符串不知道你有没有拼接过字符串&#xff0c;特别是那种有多个参数&#xff0c;字符串比较长的情况。比如现在有个需求&#xff1a;要用get请求调用第三方接口&#xff0c;…

面试突击69:TCP 可靠吗?为什么?

作者 | 磊哥来源 | Java面试真题解析&#xff08;ID&#xff1a;aimianshi666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;相比于 UDP 来说&#xff0c;TCP 的主要特性是三个&#xff1a;有连接、可靠、面向数据流。所谓的“有连接”指的是 …

Java 是值传递还是引用传递?

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;开篇先来曝答案&#xff0c;在 Java 语言中&#xff0c;本质只有值传递&#xff0c;而无引用传递&#xff0c;解释和证明详见…

SpringCloud基于RocketMQ实现分布式事务

前言分布式事务是在微服务开发中经常会遇到的一个问题&#xff0c;之前的文章中我们已经实现了利用Seata来实现强一致性事务&#xff0c;其实还有一种广为人知的方案就是利用消息队列来实现分布式事务&#xff0c;保证数据的最终一致性&#xff0c;也就是我们常说的柔性事务。消…

漫画:怎么证明sleep不释放锁,而wait释放锁?

wait 加锁示例public class WaitDemo {private static Object locker new Object();public static void main(String[] args) throws InterruptedException {WaitDemo waitDemo new WaitDemo();// 启动新线程&#xff0c;防止主线程被休眠new Thread(() -> {try {waitDemo…

就国内某个程序员问答网站的简单的分析

为什么80%的码农都做不了架构师&#xff1f;>>> 一、数据抓取 分析页面数据&#xff0c;设计数据表结构数据只要包含投票、回答数、问题状态、最后谁回答过、浏览数、问题标题、标签&#xff0c;数据样例如下&#xff1a;由于一开只打算爬问题标题&#xff0c;问题…

iOS开发中 常用枚举和常用的一些运算符(易错总结)

1、色值的随机值&#xff1a;#define kColorValue arc4random_uniform(256)/255.0 // arc4random_uniform(256)/255.0; 求出0.0~1.0之间的数字view.backgroundColor [UIColor colorWithRed:kColorValue green: kColorValue blue: kColorValue alpha: 0.5]; 2、定时器的使用&…

明明加了唯一索引,为什么还是产生重复数据?

前段时间我踩过一个坑&#xff1a;在mysql8的一张innodb引擎的表中&#xff0c;加了唯一索引&#xff0c;但最后发现数据竟然还是重复了。到底怎么回事呢&#xff1f;本文通过一次踩坑经历&#xff0c;聊聊唯一索引&#xff0c;一些有意思的知识点。1.还原问题现场前段时间&…

nmap入门之主机发现

2019独角兽企业重金招聘Python工程师标准>>> #主机发现&#xff08;HOST DISCOVERY&#xff09; ##仅列出IP&#xff0c;不扫描 nmap -sL 192.168.70.0/24 > nmap_result.txt 2>&1##仅ping扫描&#xff0c;不扫描端口 nmap -sn 192.168.70.0/24##不ping扫…

面试官:为什么ConcurrentHashMap要放弃分段锁?

今天我们来讨论一下一个比较经典的面试题就是 ConcurrentHashMap 为什么放弃使用了分段锁&#xff0c;这个面试题阿粉相信很多人肯定觉得有点头疼&#xff0c;因为很少有人在开发中去研究这块的内容&#xff0c;今天阿粉就来给大家讲一下这个 ConcurrentHashMap 为什么在 JDK8 …

面试突击72:输入URL之后会执行什么流程?

作者 | 磊哥来源 | Java面试真题解析&#xff08;ID&#xff1a;aimianshi666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;在浏览器中输入 URL 之后&#xff0c;它会执行以下几个流程&#xff1a;执行 DNS 域名解析&#xff1b;封装 HTTP 请…

面试必备:TCP 经典 15 连问!

TCP协议是大厂面试必问的知识点。整理了15道非常经典的TCP面试题&#xff0c;希望大家都找到理想的offer呀1. 讲下TCP三次握手流程开始客户端和服务器都处于CLOSED状态&#xff0c;然后服务端开始监听某个端口&#xff0c;进入LISTEN状态第一次握手(SYN1, seqx)&#xff0c;发…

ISP QoS Lab

ISP QoS Lab1-PQ优先级队列&#xff08;PQ&#xff0c;Priority Queue&#xff09;中&#xff0c;有高、中、普通、低优先级四个队列。数据包根据事先的定义放在不同的队列中&#xff0c;路由器按照高、中、普通、低顺序服务&#xff0c;只有高优先级的队列为空后才为中优先级的…

面渣逆袭:JVM经典五十问,这下面试稳了!

引言1.什么是JVM?JVM——Java虚拟机&#xff0c;它是Java实现平台无关性的基石。Java程序运行的时候&#xff0c;编译器将Java文件编译成平台无关的Java字节码文件&#xff08;.class&#xff09;,接下来对应平台JVM对字节码文件进行解释&#xff0c;翻译成对应平台匹配的机器…

操作系统大内核和微内核_操作系统中的内核类型

操作系统大内核和微内核As we have already studied about the Kernels, we know that the Kernel is a program which is the main component of the Operating System. Now let us study about the types of Kernels. 正如我们已经研究了内核一样 &#xff0c;我们知道内核是…

【论文解读】Learning based fast H.264 to H.265 transcoding

时间&#xff1a; 2015 年 级别&#xff1a;APSIPA 机构&#xff1a; 上海电力大学 摘要 新提出的视频编码标准HEVC (High Efficiency video coding)以其比H.264/AVC更好的编码效率&#xff0c;被工业界和学术界广泛接受和采用。在HEVC实现了约40%的编码效率提升的同时&#…