Grunt 实现 js、CSS 合并和压缩

发表于 分类于 阅读次数：

前提条件，知道如何安装nodejs、grunt，这里不做介绍，可以自行google

实现此功能需要安装的Grunt工具有如下

grunt-contrib-concat

grunt-contrib-uglify

grunt-css

1、实现js的合并和压缩

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {   //合并文件
            domop : {
                src: ['assets/test1.js', 'assets/test2.js'],  //源文件目录
                dest: 'dest/result.js'   //目标文件目录，自动创建dest目录
            }
        },
        uglify : {   //压缩文件
            options : {
                banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build : {
                src : 'dest/result.js',
                dest : 'dest/result.min.js'
            }
        }
    });
    // 载入concat和uglify插件，分别对于合并和压缩
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 注册任务
    grunt.registerTask('default', ['concat', 'uglify']);
};

2、实现css的合并和压缩

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module.exports = function(grunt){
    grunt.initConfig({
        pkg:grunt.file.readJSON('package.json'),
        concat:{
            css:{
                src:['assets/*.css'],
                dest:'dest/all.css',
            }
        },
        cssmin:{
            css: {
                src: 'dest/asset/all.css',
                dest: 'dest/asset/all-min.css'
            }
        }
  
    });
    // 载入concat和css插件
    grunt.loadNpmTasks('grunt-contrib-concat');//用于合并
    grunt.loadNpmTasks('grunt-css');//用于压缩
    grunt.registerTask('default',['concat','cssmin']);//任务
};