自动化构建工具grunt的学习

关于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\']);
};