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的链接和压缩的更多相关文章

  1. 使用GruntJS链接与压缩多个JavaScript文件

    使用GruntJS链接与压缩多个JavaScript文件 自己写了个简单的HTML5 Canvas的图表库,可以支持饼图,折线图,散点图,盒子图 柱状图,同时支持鼠标提示,绘制过程动画效果等.最终我想 ...

  2. 配置grunt进行css、js的检查、合并和压缩

    现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是  http://www.gruntjs.net 这是个中文网站,有文档 ...

  3. js获取带#号链接后的参数

    现在许多的主流网站都将'#'大规模用于重要URL中,我们通过正则表达式和window.location.search获取参数已经行不通了. 一.'#'号是什么 1.#代表网页中的一个位置.其后面的字符 ...

  4. 使用Ant和YUICompressor链接合并压缩你的JS和CSS代码

    JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳 ...

  5. Grunt:GruntFile.js

    ylbtech-Grunt:GruntFile.js 1.返回顶部 1. module.exports = function (grunt) { grunt.initConfig({ useminPr ...

  6. 网易云音乐JS逆向解析歌曲链接

    Request URL:   https://music.163.com/weapi/song/enhance/player/url?csrf_token= FormData : params: BV ...

  7. 一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手

    <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...

  8. Python-JS (JS介绍~JS的基础数据类型)

    目录一.JS语言介绍: 1.JS概念 2.JS组成 二.JS的三种存在位置(引入方式): 1.行间式: 2.内联式: 3.外联式: 三.JS出现的具体位置: 四.JS语法规范 五.JS中变量的定义 E ...

  9. 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 ...

  10. html+js(swiper.js)+css左右滑动切换页面效果,适配移动端

    demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...

随机推荐

  1. 利用注解和反射,将Bean枚举字段的值填入相应的字段中,并转化为fastjson返回前台

    需求:需要将枚举类型的字段例如enable(是否启用)转化为enable:1,enableName:是.这种形式返回给前台. 思路:在bean字段上加上枚举类型的注解,通过字段的值和枚举类反射获取枚举 ...

  2. jquery 全选获取值

    首选区分一下prop与attr的差别.prop是固有属性,attr自定义属性. $("#all").click(function () {//全选.反选 if(this.check ...

  3. 3.【nuxt起步】-下面以一个SPA单页程序为例子

    spa:single page applcation 1.components目录新建header.vue,footer.vue Header.vue Footer.vue Pages/index.v ...

  4. Odoo10对套件的处理

    Odoo10对套件的处理更强, 除了老版本支持的 销售套件, 按组件出货: 现在还增加了 采购套件, 按组件进货     建立 组件产品 KIT     设置 虚件BOM         测试,   ...

  5. 3D打印技术之切片引擎(4)

    [此系列文章基于熔融沉积( fused depostion modeling, FDM )成形工艺] 这一篇文章我讲一下多边打印的问题,多边打印是切片引擎的一项关键的技术. 图1 双边打印 首先.它能 ...

  6. 斯坦福公开课:Developing IOS 8 App with Swift(1-3)心得体会

    最近开始学习Swift开发移动程序.跟随斯坦福大学的公开课进行自学. 这真是一个美好的时代,虽然不能在斯坦福求学,但是可以观看录制的授课录像.讲义,好似老师在给我们上课一样! 心得: 1.每节课信息量 ...

  7. Active Directory组织单位(Organizational Unit)操作汇总

    前言 本章聊Active Directory的组织单位(OU)的新增.修改.移动等操作,使用.NET Framework 为我们提供的System.DirectoryServices程序集. 不积跬步 ...

  8. Canvas学习笔记——缓动

    当你驾车在高速公路上行驶时,速度是很快的,而快到收费站时,则开始减速直到停下.将这个例子转换成物理模型就是当物体向终点运动时,开始速度会很快,而在快要到达终点时,速度会逐渐放缓直至0,整个运动过程就是 ...

  9. 零基础学python-4.5 标准类型分类

    1.按存储分:原子类型和容器类型 原子类型:仅仅能包括一个对象 容器类型:能够包括多个对象 分类 python类型 原子类型 数值和字符串 容器类型 列表.元组和字典 2.按能否够变化分:可变和不可变 ...

  10. new和delete的基本用法

    前言 new和delete是C++中用来动态管理内存分配的运算符,其用法较为灵活.如果你对它们的几种不同用法感到困惑,混淆,那么接着看下去吧. 功能一:动态管理单变量/对象空间 下面例子使用new为单 ...