zoukankan      html  css  js  c++  java
  • grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com

    grunt基础教程:http://www.gruntjs.net/docs/getting-started/

      http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html
      http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.html
    package配置文件
      http://blog.csdn.net/woxueliuyun/article/details/39294375

        npm install grunt@0.4.5 --save-dev//安装grunt
        npm install -g grunt-cli//全局执行cli
        npm install
        grunt --version//检测

    grunt执行子任务:

    grunt.initConfig({
        concat: {
            js:{},
            css:{}
        }
    })

    以上代码,只执行合并css,可以 grunt concat:css

    一、需求

    1.执行grunt——默认合并压缩js和css
    2.执行grunt js——合并压缩js
    3.执行grunt css——合并压缩css

     二、依赖插件

    1.js压缩:uglify    https://github.com/gruntjs/grunt-contrib-uglify

    三、代码

    [GruntFile.js]

    module.exports = function(grunt) {
        grunt.initConfig({
            timestamp:'<%= grunt.template.today("yyyymmddHHMM") %>',
            jspath:'app/js/',
            csspath:'app/css/',
            concat: {
                js:{
                    options: {
                        separator: ';'
                    },
                    src: [
                        "<%= jspath %>template.js",
                        "<%= jspath %>returnCode.js",
                    ],
                    dest: '<%= jspath %>all.<%= timestamp %>.js'          
                },
                css:{
                    src: [
                        '<%= csspath %>manage.css',
                        '<%= csspath %>jqpagination.css'
                    ],
                    dest: '<%= csspath %>all.<%= timestamp %>.css'
                }
            },
            uglify: {
                options: {
                    banner: '/*! <%= concat.js.dest %> */
    '
                },
                dist: {
                    files: {
                        '<%= jspath %>all.min.<%= timestamp %>.js': ['<%= concat.js.dest %>']
                    }
                }
            },
            cssmin: {
                minify: {
                    expand: true,
                    cwd: '<%= csspath %>',
                    src: 'all.<%= timestamp %>.css',
                    dest: '<%= csspath %>',
                    ext: '.min.<%= timestamp %>.css'
                }
            }
        });
        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        //自定义任务
        grunt.registerTask('default', ['concat','uglify','cssmin']);//默认    
        grunt.registerTask('js', ['concat:js','uglify']);
        grunt.registerTask('css', ['concat:css','cssmin']);
    };

    [pakeage.json]

    {
      "name": "test",
      "author": "youryida",  
      "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-contrib-concat": "^0.4.0",
        "grunt-contrib-uglify": "^0.4.0",
        "grunt-contrib-cssmin": "latest"
      }
    }
  • 相关阅读:
    VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程
    【Demo 0025】注册/反注册窗体类RegisterClassEx/UnregisterClass
    《白手起家Win32SDK应用程序》(完整版+目录)
    关于初始化C++类成员
    TCP和UDP的"保护消息边界" (经典)
    (经典)tcp粘包分析
    解决TCP网络传输“粘包”问题
    无锁队列
    MFC全局函数开局——AfxGetApp解剖
    Tomcat系列之服务器的安装与配置以及各组件详解
  • 原文地址:https://www.cnblogs.com/youryida/p/4194313.html
Copyright © 2011-2022 走看看