grunt项目构建

93 阅读 0 评论 62 点赞

我是靠谱客的博主干净钻石，这篇文章主要介绍grunt项目构建，现在分享给大家，希望可以做个参考。

最近想把项目里添加grunt，说白了就是前端自动化管理，具体配置如下：

用到以下几个部件：

grunt-contrib-cssmin

grunt-contrib-uglify

grunt-contrib-jshint

grunt-contrib-imagemin

grunt-contrib-concat

这几个应该是最常用的几个部件，用于我们页面需要后台部署，所以没有用html压缩。

过几天会把文件合并部件加上，减少http请求。再找一下有没有图片合并的部件，百度的F.I.S就整合了图片合并的部件。

目录结构：

干货。。。

Gruntfile.js

复制代码

module.exports = function (grunt) {

// 构建任务配置
    grunt.initConfig({

//读取package.json的内容，形成个json数据
        pkg: grunt.file.readJSON('package.json'),

//javascript检查纠错
        jshint: {
            all: ['Gruntfile.js', 'js/allChose.js', 'js/header.js', 'js/index.js', 'register.js', 'table.js']
        },

//压缩js
        uglify: {
            //文件头部输出信息
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
            },
            my_target: {
                files: [
                    {
                        expand: true,
                        //相对路径
                        cwd: 'js/',
                        src: '*.js',
                        dest: 'dest/js'
                    }
                ]
            }
        },

//文件合并
        concat: {
            option: {
                separator: ';'
            },
            dist: {
                src: ['dest/js/allChose.js', 'dest/js/header.js', 'dest/js/index.js', 'dest/js/register.js', 'dest/js/table.js'],
                dest: 'dest/lib.min.js'
            }
        },

//压缩css
        cssmin: {
            //文件头部输出信息
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n',
                //美化代码
                beautify: {
                    //中文ascii化，非常有用！防止中文乱码的神配置
                    ascii_only: true
                }
            },
            my_target: {
                files: [
                    {
                        expand: true,
                        //相对路径
                        cwd: 'style/',
                        src: '*.css',
                        dest: 'dest/css'
                    }
                ]
            }
        },

//图片优化
        imagemin: {
            dist: {
                files: [
                    {
                        expand: true,
                        //相对路径
                        cwd: 'style/image',
                        src: ['*.{gif,jpg,png}'],
                        dest: 'dest/img'

}
                ]
            }
        }
    });

// 加载指定插件任务
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');

// 默认执行的任务
    grunt.registerTask('default', ['jshint', 'uglify', 'concat', 'cssmin', 'imagemin']);

};

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
module.exports = function (grunt) {

    // 构建任务配置
    grunt.initConfig({

        //读取package.json的内容，形成个json数据
        pkg: grunt.file.readJSON('package.json'),

        //javascript检查纠错
        jshint: {
            all: ['Gruntfile.js', 'js/allChose.js', 'js/header.js', 'js/index.js', 'register.js', 'table.js']
        },

        //压缩js
        uglify: {
            //文件头部输出信息
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
            },
            my_target: {
                files: [
                    {
                        expand: true,
                        //相对路径
                        cwd: 'js/',
                        src: '*.js',
                        dest: 'dest/js'
                    }
                ]
            }
        },

        //文件合并
        concat: {
            option: {
                separator: ';'
            },
            dist: {
                src: ['dest/js/allChose.js', 'dest/js/header.js', 'dest/js/index.js', 'dest/js/register.js', 'dest/js/table.js'],
                dest: 'dest/lib.min.js'
            }
        },

        //压缩css
        cssmin: {
            //文件头部输出信息
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n',
                //美化代码
                beautify: {
                    //中文ascii化，非常有用！防止中文乱码的神配置
                    ascii_only: true
                }
            },
            my_target: {
                files: [
                    {
                        expand: true,
                        //相对路径
                        cwd: 'style/',
                        src: '*.css',
                        dest: 'dest/css'
                    }
                ]
            }
        },

        //图片优化
        imagemin: {
            dist: {
                files: [
                    {
                        expand: true,
                        //相对路径
                        cwd: 'style/image',
                        src: ['*.{gif,jpg,png}'],
                        dest: 'dest/img'

                    }
                ]
            }
        }
    });

    // 加载指定插件任务
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');

    // 默认执行的任务
    grunt.registerTask('default', ['jshint', 'uglify', 'concat', 'cssmin', 'imagemin']);

};