使用grunt js进行js的链接和压缩
1,http://nodejs.org/download/ 安装nodejs
2,配置环境变量,将nodejs的安装目录放置在Path环境变量中
3,在cmd中 npm install -g grunt-cli,如果已经安装的话npm uninstall -g grunt 这句话可以删除
4,grunt -version 可以查看是否安装成功
5,在要压缩的跟目录中创建package.json
6, 一个简单的package.json样例
{
"name": "umeditor",
"title": "umeditor",
"description": "umeditor",
"version": "1.2.2",
"homepage": "https://github.com/fex-team/umeditor",
"author": {
"name": "f-cube @ FEX",
"url": "http://fex.baidu.com"
},
"repository": {
"type": "git",
"url": "https://github.com/fex-team/umeditor.git"
},
"keywords": [
"umeditor",
"web editor",
"ueditor",
"javascript"
],
"bugs": {
"url": "https://github.com/fex-team/umeditor/issues"
},
"dependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-cssmin": "~0.6.0",
"grunt-closurecompiler": "~0.9.9",
"grunt-contrib-copy": "~0.4.0",
"grunt-transcoding": "~0.1.1",
"grunt-text-replace": "~0.3.9",
"grunt-contrib-compress": "~0.7.0"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "^0.3.0",
"grunt-contrib-uglify": "^0.5.1"
}
}
7,创建 Gruntfile.js
一个简单的样例
module.exports = function(grunt) {
grunt.initConfig({
//our JSHint options
//our concat options
concat: {
options: {
},
dist: {
src: ['Src/*.js'], //Grunt mini match for your scripts to concatenate
dest: 'dest/edit.js' //where to output the script
}
},
//our uglify options
uglify: {
js: {
files: {
'dest/edit.js': ['dest/edit.js'] //save over the newly created script
}
}
}
});
//load our tasks
//grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// default tasks to run
grunt.registerTask('default', ['concat', 'uglify']);
//grunt.registerTask('development', ['jshint']);
//grunt.registerTask('production', ['jshint', 'concat', 'uglify']);
}
7,执行npm install grunt --save-dev 可以将最新的grunt到你的目录下
8,执行grunt 命令就实现打包了
使用grunt js进行js的链接和压缩的更多相关文章
- 使用GruntJS链接与压缩多个JavaScript文件
使用GruntJS链接与压缩多个JavaScript文件 自己写了个简单的HTML5 Canvas的图表库,可以支持饼图,折线图,散点图,盒子图 柱状图,同时支持鼠标提示,绘制过程动画效果等.最终我想 ...
- 配置grunt进行css、js的检查、合并和压缩
现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是 http://www.gruntjs.net 这是个中文网站,有文档 ...
- js获取带#号链接后的参数
现在许多的主流网站都将'#'大规模用于重要URL中,我们通过正则表达式和window.location.search获取参数已经行不通了. 一.'#'号是什么 1.#代表网页中的一个位置.其后面的字符 ...
- 使用Ant和YUICompressor链接合并压缩你的JS和CSS代码
JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳 ...
- Grunt:GruntFile.js
ylbtech-Grunt:GruntFile.js 1.返回顶部 1. module.exports = function (grunt) { grunt.initConfig({ useminPr ...
- 网易云音乐JS逆向解析歌曲链接
Request URL: https://music.163.com/weapi/song/enhance/player/url?csrf_token= FormData : params: BV ...
- 一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- Python-JS (JS介绍~JS的基础数据类型)
目录一.JS语言介绍: 1.JS概念 2.JS组成 二.JS的三种存在位置(引入方式): 1.行间式: 2.内联式: 3.外联式: 三.JS出现的具体位置: 四.JS语法规范 五.JS中变量的定义 E ...
- error in static/js/xxx.js from UglifyJs Unpected token: punc() [static/js/xxx.js]
出现问题 使用vue+element-ui+webpack开发项目时,Jenkins构建出现报错error in static/js/xxx.js from UglifyJs Unpected tok ...
- html+js(swiper.js)+css左右滑动切换页面效果,适配移动端
demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...
随机推荐
- Codeforces Round #317 [AimFund Thanks-Round] (Div. 2) Array 模拟
题目链接:http://codeforces.com/contest/572/problem/A 题意 就给你两个数组,问你能不能从A数组中取出k个,B数组中取出m个,使得这k个都大于这m个. 题解 ...
- 高并发场景下System.currentTimeMillis()的性能优化
一.前言 System.currentTimeMillis()的调用比new一个普通对象要耗时的多(具体耗时高出多少我也不知道,不过听说在100倍左右),然而该方法又是一个常用方法, 有时不得不使用, ...
- Android 获取设备唯一标识码
概述 有时需要对用户设备进行标识,所以希望能够得到一个稳定可靠并且唯一的识别码.虽然Android系统中提供了这样设备识别码,但是由于Android系统版本.厂商定制系统中的Bug等限制,稳定性和唯一 ...
- android 根据图片名字获取图片id
public int getResource(String imageName){ Context ctx=getBaseContext(); int resId = getResources().g ...
- [影像技术与PACS] 从技术角度看国内部份PACS厂商
天健PACS较早从事影像医院处理系统,为国外系统或设备以OEM方式提供软件模块.天健的PACS里面三维重建.容积重建.血管分析.虚拟腔镜.头部灌注等部分是用西安盈谷科技的,手术麻醉和重症监护系统是奥迪 ...
- C#制作、打包、签名、发布Activex全过程【转】
http://www.cnblogs.com/still-windows7/p/3148623.html 一.前言 最近有这样一个需求,需要在网页上面启动客户端的软件,软件之间的通信.调用,单单依靠H ...
- How to create a freehand tool
http://forums.esri.com/Thread.asp?c=159&f=1707&t=283694&mc=1 http://blog.sina.com.cn/s/b ...
- OpenGL超级宝典笔记——深度纹理和阴影 【转】
目录[-] 光源视角 新型的纹理 深度纹理的大小 首先绘制阴影 然后是光照 投影阴影贴图 阴影比较 之前我们介绍过简单的把物体压平到投影平面来制造阴影.但这种阴影方式有其局限性(如投影平面须是平面). ...
- Cocos2d-x学习笔记(18)(TestCpp源代码分析-2)
本章主要讲controller.h/cpp文件的分析,该文件主要用于演示样例场景管理类TestController,用于显示全部演示样例的菜单. //controller.cpp #include & ...
- Android二维码工具zxing使用
二维码在我们生活中随处可见.在我眼里简直能够用"泛滥"来形容啦.那怎样在我们Android项目中扫描识别二维码或生成二维码图片呢? 我们通常使用的开源框架是zxing.在githu ...