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

简介: 使用GruntJS链接与压缩多个JavaScript文件

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


自己写了个简单的HTML5 Canvas的图表库,可以支持饼图,折线图,散点图,盒子图


柱状图,同时支持鼠标提示,绘制过程动画效果等。最终我想把这些多个JS文件变成


一个JS文件发布出去,于是我的问题来啦,怎么把这些JS文件搞成一个啊,群里有个


朋友告诉我,GruntJS – JavaScript多文件编译,风格检查,链接与压缩神器。Google了一


把终于帮我完成这个任务,算是入门,分享一下过程。



一什么是GruntJS


不想翻译英文,自己看它的网站吧->http://gruntjs.com/


二:安装与运行


它的官方教程说的不是很清楚,有点让第一次看的人云里雾里的。我总结一下,GruntJS


是基于与依赖服务器node.js的。所以首先第一步是下载并安装node.js,下载地址:


http://nodejs.org/download/



第二步:运行安装grunt命令行工具– 目的是为了使用grunt命令


只有在windows的命令行窗口中运行:npm install -g grunt-cli即可。

更具体的解释参见这里:http://gruntjs.com/getting-started



第三步:在项目的根目录创建project.json与Gruntfile.js两个文件


因为grunt的task运行要依赖于这两个文件。


其中创建project.json文件方法可以通过命令行实现:nmp init我创建project.json


内容如下:

{
 
 "name": "fishchart",
 
 "version": "0.0.1",
 
 "description": "html5 canvas chart library",
 
 "author": "zhigang",
 
 "license": "BSD",
 
 "devDependencies": {
 
   "grunt": "~0.4.1",
 
   "grunt-contrib-uglify": "~0.2.2",
 
   "grunt-contrib-jshint": "~0.6.2",
 
   "grunt-contrib-concat": "~0.3.0"
 
  }
 
}

使用命令创建时候,如果你不知道写什么直接回车跳过即可。



三: 安装与使用Grunt Plug-in完成javascript文件链接与压缩

1.  安装javascript文件链接插件支持

npm install grunt-contrib-concat --save-dev


2. 安装javascript文件压缩插件支持

npm install grunt-contrib-uglify --save-dev

3. 在Gruntfile.js文件中配置选项,加载与定义task

module.exports = function(grunt) {
 
    grunt.initConfig({
 
        //our JSHint options
        jshint: {
            all: ['main.js'] //files to lint
        },
 
        //our concat options
        concat: {
            options: {
                separator: ';' //separates scripts
            },
            dist: {
                src: ['js/*.js', 'js/**/*.js'], //Grunt mini match for your scripts to concatenate
                dest: 'js/fishchart_v0.0.1.js' //where to output the script
            }
        },
 
        //our uglify options
        uglify: {
            js: {
                files: {
                    'js/fishchart_v0.0.1.js': ['js/fishchart_v0.0.1.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', ['jshint', 'concat', 'uglify']);
  grunt.registerTask('development', ['jshint']);
  grunt.registerTask('production', ['jshint', 'concat', 'uglify']);
  }

四:运行结果

最后还想赞一下,这个东西太好用啦!

相关文章
|
9天前
|
JSON JavaScript 前端开发
若依修改,若依如何发送get和post请求,发送数据请求的写法,若依请求的API在src的api文件下,建立请求的第一步,在API中新建一个文件,第二步新建JavaScript文件
若依修改,若依如何发送get和post请求,发送数据请求的写法,若依请求的API在src的api文件下,建立请求的第一步,在API中新建一个文件,第二步新建JavaScript文件
|
11天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
10天前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
9天前
|
JavaScript
JS【实战】跨域的网页链接跳转
JS【实战】跨域的网页链接跳转
6 0
|
9天前
|
NoSQL 前端开发 测试技术
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
若依修改-------控制若依重定向的路径,控制路径重定向的写法路径在,在permission.js文件中控制重定向
若依修改-------控制若依重定向的路径,控制路径重定向的写法路径在,在permission.js文件中控制重定向
|
9天前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
9天前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
10天前
|
JavaScript
TS,编写TS文件,编写hello.ts文件,cmd下打开终端,输入tsc hello.ts会生成一个hello.js文件,简化命令,npm i -g ts-node,ts-node hello.ts
TS,编写TS文件,编写hello.ts文件,cmd下打开终端,输入tsc hello.ts会生成一个hello.js文件,简化命令,npm i -g ts-node,ts-node hello.ts
|
11天前
|
JavaScript
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件