grunt项目构建工具
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 ...
随机推荐
- Android-远程Service
http://blog.csdn.net/guolin_blog/article/details/9797169 http://www.jianshu.com/p/eeb2bd59853f 将一个普通 ...
- HDU2819(KB10-E 二分图最大匹配)
Swap Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- 【代码笔记】iOS-将字符串中特定后的字变成红色
一,效果图. 二,代码. ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup ...
- profile,bashrc,.bash_profile,.bash_login,.profile,.bashrc,.bash_logout浅析 Part 2
profile,bashrc,.bash_profile,.bash_login,.profile,.bashrc,.bash_logout浅析 Part 2 by:授客 QQ:103355312 ...
- WOSA/XFS PTR Form解析库—FormRule.h
#ifndef _FORMRULE_H_#define _FORMRULE_H_ #include <XFSPTR.H>#include <string>#include &l ...
- nginx 配置 非80 的其他 端口
如果nginx的监听端口不是默认的80端口,改为其他非80端口后,后端服务tomcat中的request.getServerPort()方法无法获得正确的端口号,仍然返回到80端口.在response ...
- qtcreator minggw 支持c++11
pro文件添加 QMAKE_CXXFLAGS += -std=c++11
- LeetCode题解之Happy Number
1.题目描述 2.题目分析 根据 happy number 的 性质,如果循环7次还没有到达 1,则这个数不是happy number . 3.代码 bool isHappy(int n) { ) r ...
- python 流程控制(条件语句)
1,python流程控制单条件基本语句 2,python流程流程多条件控制语句 3,三元运算 1,python流程控制单条件基本语句 if 判断条件: 执行语句…… else: 执行语句…… 判断条件 ...
- 基元用户模式构造--互锁构造 Interlocked 实现的异步web请求实例
using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using Syst ...