自動化構建工具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']);
};