zoukankan      html  css  js  c++  java
  • grunt使用小记

    1.安装nodejs,从nodejs官网上wget

    2.把nodejs的bin目录加进PATH

    3.切到项目目录

    4.核心配置package.json、Gruntfile.js

    5.package.json:

    {
      "name": "oauth",
      "version": "0.1.0",
      "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-contrib-jshint": "~0.10.0",
        "grunt-contrib-nodeunit": "~0.4.1",
        "grunt-contrib-uglify": "~0.5.0"
      }
    }

    6.用npm安装依赖时加上命令--save-dev可以给配置文件里写入依赖项,比如npm install grunt --save-dev

    7.Gruntfile.js:

    module.exports = function(grunt){
    
        // 项目配置
        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
            uglify: {
                options: {
                    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
    '//添加banner
                },
                builda: {//任务一:压缩a.js,不混淆变量名,保留注释,添加banner和footer
                    options: {
                        mangle: false, //不混淆变量名
                        preserveComments: 'all', //不删除注释,还可以为 false(删除全部注释),some(保留@preserve @license @cc_on等注释)
                        footer:'
    /*! <%= pkg.name %> 最后修改于: <%= grunt.template.today("yyyy-mm-dd") %> */'//添加footer
                    },
                    files: {
                        'output/js/a.min.js': ['js/a.js']
                    }
                },
                buildb:{//任务二:压缩b.js,输出压缩信息
                    options: {
                        report: "min"//输出压缩率,可选的值有 false(不输出信息),gzip
                    },
                    files: {
                        'output/js/b.min.js': ['js/main/b.js']
                    }
                },
                buildall: {//任务三:按原文件结构压缩js文件夹内所有JS文件
                    files: [{
                        expand:true,
                        cwd:'js',//js目录下
                        src:'**/*.js',//所有js文件
                        dest: 'output/js'//输出到此目录下
                    }]
                },
                release: {//任务四:合并压缩a.js和b.js
                    files: {
                        'output/js/index.min.js': ['js/a.js', 'js/main/b.js']
                    }
                }
            }
        });
    
        // 加载提供"uglify"任务的插件
        grunt.loadNpmTasks('grunt-contrib-uglify');
    
        // 默认任务
        grunt.registerTask('default', ['uglify:release']);
        grunt.registerTask('mina', ['uglify:builda']);
        grunt.registerTask('minb', ['uglify:buildb']);
        // grunt.registerTask('minall', ['uglify:buildall']);
    }

    8.在项目目录下运行grunt [task] task可以在Gruntfile.js里注册

     

    nothing is impossible,but how long it take
  • 相关阅读:
    tp框架 php ajax 登陆
    js代码之编程习惯
    基于bootstrap的后台左侧导航菜单和点击二级菜单刷新二级页面时候菜单展开显示当前菜单
    用WebStorm进行Angularjs 2的开发
    关于datetimepicker只显示年、月、日的设置
    checkbox多选按钮变成单选
    mac navicate破解版汉化
    mac CodeIgniter和EasyWeChat 开发微信公众号
    python settings :RROR 1130: Host 'XXXXXX' is not allowed to connect to this MySQL server
    Eclipse中如何显示代码行
  • 原文地址:https://www.cnblogs.com/gavinphp/p/4789132.html
Copyright © 2011-2022 走看看