博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用grunt js进行js的链接和压缩
阅读量:5234 次
发布时间:2019-06-14

本文共 1878 字,大约阅读时间需要 6 分钟。

1, 安装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 命令就实现打包了

转载于:https://www.cnblogs.com/laogao/p/3872132.html

你可能感兴趣的文章
如何在vue单页应用中使用百度地图
查看>>
Springboot使用步骤
查看>>
Spring属性注入
查看>>
Springboot-配置文件
查看>>
Springboot-日志框架
查看>>
SpringBoot-thymeleaf
查看>>
P1908-逆序对
查看>>
P1192-台阶问题
查看>>
ACM模板——康托展开
查看>>
P1025-数的划分
查看>>
P1305-新二叉树
查看>>
第24章 项目5:虚拟茶话会
查看>>
python 读 xlsx
查看>>
设计模式C#合集--工厂方法模式
查看>>
IDEA中Git之项目场景
查看>>
java
查看>>
题目1104:整除问题
查看>>
Facebook----扎克伯格
查看>>
mac下破解apk文件以及apktool的相关使用
查看>>
优化网站设计(二十六):设计“智能”的事件处理程序
查看>>