自动化构建工具grunt的学习

 
关于grunt的一些记录，记的比较乱。。。

---

 

0.删除node_modules文件夹

命令行：

npm install rimraf -g  //先运行
rimraf node_modules  //然后运行

1.安装grunt及插件

 安装grunt：

npm install grunt --save-dev

安装插件，不需要的可以删除：

npm install --save-dev grunt-contrib-cssmin grunt-contrib-uglify grunt-contrib-watch grunt-contrib-copy

2.插件介绍

grunt-contrib-jshint：javascript语法错误检查；
grunt-contrib-watch：实时监控文件变化、调用相应的任务重新执行；
grunt-contrib-uglify：JS文件压缩
grunt-contrib-cssmin：css文件压缩
grunt-contrib-copy：复制文件、文件夹
grunt-contrib-clean：清空文件、文件夹
grunt-contrib-concat：合并多个文件的代码到一个文件中
grunt-contrib-htmlmin: HTML文件压缩

3.—save-dev

“—save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项。

上文在配置package.json时，其中的“devDependencies”中就会存储开发依赖项。

 

 

在学习grunt中，遇到的一些教程链接：

npm的package.json中文文档：https://github.com/ericdum/mujiang.info/issues/6

grunt入门教程：http://www.cnblogs.com/wangfupeng1988/p/4561993.html

grunt常用插件及示例说明：http://blog.csdn.net/ligang2585116/article/details/53790043

 

 

我配置的Gruntfile.js文件

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        clean: {
            build: ['build']
        },
        copy: {
            main: {
                files: [
                    {
                        expand: true,
                        cwd: 'www',
                        src: '**',
                        dest: 'build',
                        flatten: false,
                        filter: 'isFile'
                    }
                ]
            }
        },
        uglify: {
            main: {
                options: {
                    sourceMap: false
                },
                files: [
                    {
                        expand: true,
                        cwd: 'build/src/js/',
                        src: ['**/*.js', '!**/*.min.js'],
                        dest: 'build/src/js/'
                    },
                    {
                        expand: true,
                        cwd: 'build/src/libs/',
                        src: ['*.js', '!*.min.js'],
                        dest: 'build/src/libs/'
                    },
                    {
                        expand: true,
                        cwd: 'build/src/libs/jquery',
                        src: ['*.js', '!*.min.js'],
                        dest: 'build/src/libs/jquery'
                    },
                    {
                        expand: true,
                        cwd: 'build/src/libs/layui/lay/modules',
                        src: ['*.js', '!*.min.js'],
                        dest: 'build/src/libs/layui/lay/modules'
                    },
                    {
                        expand: true,
                        cwd: 'build/src/libs/layui',
                        src: ['*.js', '!*.min.js'],
                        dest: 'build/src/libs/layui'
                    }
                ]
            }
        },
        cssmin: {
            /* minify: {
                expand: true,
                cwd: 'demo/resources/css',
                src: ['*.css', '!*.min.css'],
                dest: 'build/resources/css'
            } */
            main: {
                files: [
                    {
                        expand: true,
                        cwd: 'build/src/css',
                        src: ['*.css', '!*.min.css'],
                        dest: 'build/src/css'
                    }
                ]
            },
            easyUI: {
                files: [
                    {
                        expand: true,
                        cwd: 'build/src/libs/easyUI',
                        src: ['*.css', '!*.min.css'],
                        dest: 'build/src/libs/easyUI'
                    }
                ]
            }
        },
        watch: {
            options: {
                livereload: true
            },
            build: {
                files: ['www/src/*.html', 'www/src/js/**/*.js', 'www/src/css/*.css'],
                tasks: ['uglify', 'cssmin:main'],
                options: {
                    spawn: false
                }
            }
        }
    });
    
    
    
    
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    
    
    grunt.registerTask('default', ['clean', 'copy', 'cssmin', 'watch']);
    //grunt.registerTask('default', ['clean']);
};