zoukankan      html  css  js  c++  java
  • grunt 入门 应用grunt对代码进行压缩

    1、什么是grunt

      grunt的官方解释是:javascript世界的构建工具。

      为何要构建工具?

         一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在Gruntfile文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

    2、如何开始grunt?

      1、准备node环境 安装node(参考官方)

      2、安装grunt : 我们需要安装CLI官方推荐在全局安装CLI(grunt的命令行接口)

      

    npm install -g grunt-cli

      3、新建package.json

    {
        "name":"my-project-name",        //项目版本"version":"0.1.0","devDependencies":{             //插件名版本
            "grunt":"~0.4.1",
            "grunt-contrib-jshint":"~0.6.3",
            "grunt-contrib-uglify":"~0.2.1",
            "grunt-contrib-requirejs":"~0.4.1",
            "grunt-contrib-copy":"~0.4.1",
            "grunt-contrib-concat":"~0.3.0",
            "grunt-contrib-clean":"~0.5.0",
            "grunt-strip":"~0.2.1"
        },
        
        "dependencies":{
            "express":"3.x"
        }
        
    }

    4.新建Gruntfile.js

    /*module.exports = function(grunt){
        grunt.initConfig({
            pkg:grunt.file.readJSON("package.json"),
            concat:{
                options:{
                    separator:';'
                },
                dist:{
                    src:['src/zepto.js','src/underscore.js','src/backbone.js'],
                    dest:'dest/libs.js'
                }
            },
            uglify:{
                build:{
                    src:'dest/libs.js',
                    dest:'dest/libs.min.js'
                }
            }
            
        });
        grunt.loadNpmTasks('grunt-contrib-uglify')
        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.registerTask('default', ['concat','uglify']);
    
        //grunt.registerTask('default', ['uglify']);
    }
    */
    module.exports = function(grunt){
        grunt.initConfig({
            uglify:{
                my_target:{
                    files:{
                        'dest/list.min.js/':['src/zepto.js','underscroe.js']
                    }
                }
            }
        });
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.registerTask('default', ['uglify']);
    }
  • 相关阅读:
    LeetCode111 二叉树的最小深度
    LeetCode104 二叉树的最大深度
    LeetCode102 二叉树的层次遍历
    LeetCode94 二叉树的中序遍历
    LeetCode145 二叉树的后序遍历
    LeetCode144 二叉树的前序遍历
    计算机考研真题 最大序列和
    计算机考研真题 对称矩阵
    计算机考研真题 点菜问题
    计算机考研真题 数字反转
  • 原文地址:https://www.cnblogs.com/junwu/p/5010706.html
Copyright © 2011-2022 走看看