grunt自定义任务——合并压缩css和js

最新推荐文章于 2025-07-25 17:05:44 发布

weixin_30909575

最新推荐文章于 2025-07-25 17:05:44 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/youryida/p/4194313.html

本文介绍如何使用Grunt实现前端资源的自动化构建流程，包括安装配置Grunt、定义任务来合并压缩JavaScript和CSS文件，并通过具体示例展示了如何在项目中运用Grunt进行资源管理和优化。

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.youkuaiyun.com/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 %> */\n'
            },
            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"
  }
}

转载于:https://www.cnblogs.com/youryida/p/4194313.html