JS项目构建工具Grunt实践
一:下面来介绍下如何用grunt合并,压缩js文件。
大概步骤有如下:
1. 新建文件夹相对应的项目 比如文件名叫:gruntJs
2. 新建文件package.json。
3. 新建文件Gruntfile.js。
4. 命令行执行grunt任务。
一: 新建文件名为:gruntJs 该根目录下有src文件夹 里面放了n个js文件要构建的,还有个叫dest文件夹(名字都可以自取),这个文件是存储编译后的js文件。
二: 新建package.json。
package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,依赖包等。
它应该和源码一样被提交到svn或git。 现在的内容如下:
{
"name": "gruntJs",
"version": "1.0.0",
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-uglify": "~0.1.2",
"grunt-contrib-concat": "~0.1.1"
}
}
配置时候 版本一定要对应,否则打包会报错。上面是正确的。
grunt-contrib-jshint js语法检查
grunt-contrib-uglify 压缩,采用UglifyJS
grunt-contrib-concat 合并文件
此时: 打开命令行工具进入到项目根目录,如(gruntJs)敲如下命令: npm install 后 如果一切正常的话 那么
再查看根目录,发现多了个node_modules目录,包含了5个子目录 grunt-cmd-transport grunt-contrib-clean
grunt-contrib-jshint grunt-contrib-uglify grunt。
三:新建文件Gruntfile.js
1。 wrapper函数,结构如下,这是Node.js的典型写法,使用exports公开API
module.exports = function(grunt) {
// Do grunt-related things in here
};
2. 项目和任务配置。
3. 载入grunt插件和任务。
4. 定制执行任务。
该示例完成以下任务:
合并src下的文件(grunt.js/bb.js)为domop.js 压缩domop.js为domop.min.js,这两个文件都放在dest目录下 最终的Gruntfile.js如下:
module.exports = function(grunt) {
// 配置
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
concat: {
domop: {
src: ['src/grunt.js', 'src/bb.js'],
dest: 'dest/domop.js'
}
},
uglify: {
build: {
src : 'dest/domop.js',
dest : 'dest/domop-min.js'
}
}
}); // 载入concat和uglify插件,分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify'); // 注册任务
grunt.registerTask('default', ['concat','uglify']);
};
四、执行grunt任务。
打开命令行,进入到项目根目录,敲 grunt 如果一切都成功的话 那么
看出成功的合并和压缩并生成了dest目录及期望的文件,这时的项目目录下多了dest.
grunt项目构建工具的更多相关文章
-
前端项目构建工具---Grunt
什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...
-
grunt自动化构建工具
一.什么是grunt? 是基于nodejs的项目构建工具,grunt和grunt插件是通过npm安装并管理的,npm是node.js的包管理器 二.为什么要用grunt? 自动化.对于反复重复的任务, ...
-
Grunt自动化构建工具(网址:http://www.gruntjs.net/getting-started或者http://gruntjs.cn/getting-started)
简介:Grunt是基于Node.js的项目构建工具,对于需要重复执行的任务,例如压缩.编译.单元测试等,自动化工具可以减少你的工作量,使你的工作更轻松. 一:检测nodejs是否安装好,打开CMD控制 ...
-
Gulp.js - 简单、直观的自动化项目构建工具
Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...
-
Java项目工程化之项目构建工具Maven
欢迎查看Java开发之上帝之眼系列教程,如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝 ...
-
项目构建工具maven的使用方法
最近在开发javaweb项目中有用到maven,以前并不是很了解,于是学习了一些相关内容,记之共享. 本篇内容在Windows环境下实施,JDK版本使用的1.7.0_79. 一.maven是什么? 简 ...
-
项目构建工具ant的使用
ant是项目构建工具,以xml文件作为构建文件,在这个xml文件(默认是build.xml,当然也可以取其它名字)里我们可以定义多个目标,用我们期待的方式去构建项目,比如说编译,测试,发邮件等等. a ...
-
【项目构建工具】 Gradle笔记1
一.Gradle简介 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XM ...
-
取代 Maven?这款项目构建工具性能提升 300%
在 GitHub 上闲逛的时候,发现了一个新的项目:maven-mvnd,持续霸占 GitHub trending 榜单好几天了. maven-mvnd,可以读作 Maven Daemon,译作 Ma ...
随机推荐
-
Ubuntu使用MyEclipse闪退的解决办法
修改myeclipse.ini文件, -Xmx512m-XX:MaxPermSize=512m-XX:ReservedCodeCacheSize=256m-Dosgi.nls.warnings=ign ...
-
jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
-
mteclipse中运行的分页,搜索,列表批量删除的界面,它的源代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
-
时间函数 time.h 详解
C++对时间的操作也有许多值得大家注意的地方.最近,在技术群中有很多网友也多次问到过C++语言中对时间的操作.获取和显示等等的问题.下面,在这篇文章中,笔者将主要介绍在C/C++中时间和日期的使用方法 ...
-
mysql里group by按照分组里的内容的排序
得到一张表里按u_id分组,按count(id)排序,每个分组的pub_time最大的哪些记录,只取count(id)最大的4条 select a.u_id,a.name,a.u_name,a.id, ...
-
毕向东JAVA视频讲解(第六课)
用java语言对现实生活中的事物进行描述. 通过类的形式来体现的. 怎么描述呢? 对于事物描述通常只关注两方面. 一个是属性,一个是行为. 只要明确该事物的属性和行为并定义在类中即可. 对象:其实就是 ...
-
vb的property 和event
Event 语句 定义用户自定义的事件. 语法 [Public] Event procedurename [(arglist)] Event 语句包含下面部分: 部分 描述 Public 可选的.指定 ...
-
MySQL存储引擎:InnoDB和MyISAM的差别/优劣评价/评测/性能测试
InnoDB和MyISAM简介 MyISAM:这个是默认类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的 顺序访问方法) 的缩写 ...
-
listctrl中的cell如何支持被复制
为了方便测试data pipeline, 使用wxpython开发了一个小工具,用来显示csv文档中的特定列,及数据库中的指定值. 显示数据的contrl选择了listctrl.但这里有个问题,显示的 ...
-
hdu 2005 java
题意: 输入数据格式为YYYY/MM/DD,对于每组输入数据,输出一行,表示该日期是该年的第几天. 思路: 使用Calendar.DAY_OF_YEAR import java.text.ParseE ...