Grunt常用脚本

Grunt用到的组件

• connect
• grunt-connect
• grunt-contrib-clean 目录和文件管理,可以用于清除临时文件和目录
• grunt-contrib-concat 合并文件，可以合并多个css或者js文件
• grunt-contrib-connect sorry,忘记了,后面补起
• grunt-contrib-copy 复制文件到指定目录
• grunt-contrib-cssmin 压缩css
• grunt-contrib-htmlmin 压缩html
• grunt-contrib-imagemin 压缩html
• grunt-contrib-uglify 压缩js
• grunt-filerev 文件重命名，比如js，css文件修改了，可以自动在文件名后面加md5后缀，配合grunt-filerev-replace和grunt-usemin可以将所有html中的js,css,image后缀全部替换，我觉得最有用的一组脚本
• grunt-filerev-replace
• grunt-shell 执行shell脚本啦，可以用这个直接讲代码部署到服务器，也很省事的脚本
• grunt-usemin
• load-grunt-tasks 自动加载组件,不用一个个加载组件了

npm中的版本^1.0.0意义，^表示1.x.x满足，2.x.x以上就不满足了
npm中的版本~1.0.0意义，~表示1.0.x满足，1.1.x以上就不满足了

In the simplest terms, the tilde matches the most recent minor version (the middle number). ~1.2.3 will match all 1.2.x versions but will miss 1.3.0.

The caret, on the other hand, is more relaxed. It will update you to the most recent major version (the first number). ^1.2.3 will match any 1.x.x release including 1.3.0, but will hold off on 2.0.0.

---

module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);

    var path = {
        src : 'src',
        dest : 'dist',
        tmp : '.tmp'
    }

    grunt.initConfig({
        path : path,
        pkg: grunt.file.readJSON('package.json'),
        connect: {
            test: {
                port: 1337,
                base: '<%= path.src %>/'
            },
            dist: {
                port: 1337,
                base: '<%= path.dest %>/'
            }
        },
        clean : {
            beforebuild : {
                files : [{
                        src : ['<%= path.dest %>/', '<%= path.tmp %>/']
                    }
                ]
            }
        },
        htmlmin: {
            dist: {
                options: {
                    removeComments: true,
                    collapseWhitespace: true
                },
                files: [{
                    expand: true,
                    cwd: '<%= path.dest %>/',
                    src: '**/*.html',
                    dest: '<%= path.dest %>/'
                }]
            }
        },
        imagemin: {
            dist: {
                options: {
                    optimizationLevel: 5
                },
                files: [{
                    expand: true,
                    cwd: '<%= path.src %>/image/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: '<%= path.dest %>/image/',
                }]
            }
        },
        filerev : {
            build : {
                files: [{
                        src : ['<%= path.dest %>/**/*.css', '<%= path.dest %>/**/*.js', '<%= path.dest %>/image/**/*.{png,jpg}']
                        // src : ['<%= path.dest %>/**/*.css', '<%= path.dest %>/**/*.js']
                    }
                ]
            }
        },
        filerev_replace: {
            options: {
                assets_root: '<%= path.dest %>'
            },
            compiled_assets: {
                src: '<%= path.dest %>/*.{css,js}'
            },
            views: {
                options: {
                    views_root: '<%= path.dest %>'
                },
                src: '<%= path.dest %>/*.html'
            }
        },
        useminPrepare : {
            build : {
                files : [{
                        src : ['<%= path.src %>/*.html']
                    }
                ]
            }
        },
        usemin : {
            html: {
                files: [{
                        src: '<%= path.dest %>/*.html'
                    }
                ]
            },
            css: {
                files: [{
                        src : '<%= path.dest %>/css/*.css'
                    }
                ]
            }
        },
        copy : {
            build : {
                files : [
                    {
                        expand : true,
                        cwd : '<%= path.src %>',
                        src: [
                            '*.{ico,png,txt}',
                            '*.html'
                        ],
                        dest : '<%= path.dest %>'
                    },
                    {
                        //for bootstrap fonts
                        expand: true,
                        dot: true,
                        cwd: 'bower_components/bootstrap/dist',
                        src: ['fonts/*.*'],
                        dest: '<%= path.dest %>/'
                    }
                ]
            }
        },
        shell: {
            deploy: {
                command: 'ssh root@xxx.xxx.xxx.xxx sh /home/update-website.sh'
            }
        }
    });

    grunt.loadNpmTasks('grunt-connect');

    grunt.registerTask('serve', 'connect:test');
    grunt.registerTask('dist-serve', 'connect:dist');

    grunt.registerTask('default', ['clean:beforebuild', 'copy', 'imagemin', 'useminPrepare', 'concat', 'cssmin', 'uglify', 'filerev', 'usemin', 'htmlmin']);

    grunt.registerTask('deploy', 'shell:deploy');
};

服务端的shell脚本:update-website.sh

cd /the-repo-dir
git pull origin your-branch