zoukankan      html  css  js  c++  java
  • 使用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']);
    	}


    四:运行结果

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

  • 相关阅读:
    基于Canal和Kafka实现MySQL的Binlog近实时同步
    Levenshtein Distance(编辑距离)算法与使用场景
    超强图文|并发编程【等待/通知机制】就是这个feel~
    volatile和synchronized到底啥区别?多图文讲解告诉你
    读《Clean Code 代码整洁之道》之感悟
    小小TODO标识,你用对了吗?
    深入理解JVM(③)判断对象是否还健在?
    深入理解JVM(③)虚拟机的类加载器(双亲委派模型)
    深入理解JVM(③)经典的垃圾收集器
    深入理解JVM(③)HotSpot虚拟机对象探秘
  • 原文地址:https://www.cnblogs.com/riskyer/p/3231028.html
Copyright © 2011-2022 走看看