grunt构建项目打包上传

全局安装grunt:
npm install -g grunt-cli
生成package.json文件
npm init
安装grunt和所需要的插件:
npm install grunt –save-dev
npm install –save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect
配置gruntfile.js语法:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        clean : {
            sit : {
                src : [ './build/sit/zyb/**' ]
            }
        },
        uglify : {
            sit : {
                files : [ {
                    expand : true,
                    cwd : './js',
                    src : [ '**/*.js', '!**/*.mini.js', '!**/*.min.js' ],
                    dest : 'build/sit/zyb/js'
                } ]
            }
        },
        cssmin : {
            sit : {
                files : [ {
                    expand : true,
                    cwd : './css',
                    src : [ '*.css', '**/*.css' ],
                    dest : 'build/sit/zyb/css'
                } ]
            }
        },
        imagemin : {
            sit : {
                options : {
                    optimizationLevel : 3
                },
                files : [ {
                    expand : true,
                    cwd : 'images/',
                    src : [ '**/*.{png,jpg,gif}' ],
                    dest : 'build/sit/zyb/images'
                } ]
            }
        },
        copy : {
            sit : {
                files : [ {
                    expand : true,
                    cwd : './',
                    src : [ 'datePicker/**/*', 'ui/**/*', 'js/**/*/*.min.js',
                            'js/**/*/*.mini.js', 'js/**/*/*.css' ],
                    dest : 'build/sit/zyb'
                } ]
            },
            prod : {
                files : [ {
                    expand : true,
                    cwd : './',
                    src : [ 'datePicker/**/*', 'ui/**/*', 'js/**/*',
                        'css/**/*', 'images/**/*', 'js/pages/renew/payInsurance.js' ],
                    dest : 'build/sit/zyb'
                } ]
            }
        },
        replace : {
            sit : {
                options : {
                    patterns : [ {
                        match : /version=(\w+)/g,
                        replacement : 'version=ZYB2018' + new Date().getTime()
                    } ]
                },
                files : [ {
                    expand : true,
                    src : [ 'pages/**/*.html' ],
                    dest : 'build/sit/zyb'
                } ]
            },
            sit_001 : {
                options : {
                    patterns : [ {
                        match : /\/\/(\s*)payAmt(\s*)=(\s*)0.01;/g,
                        replacement : 'payAmt = 0.01;'
                    } ]
                },
                files : [ {
                    expand : true,
                    src : [ 'js/pages/renew/payInsurance.js' ],
                    dest : 'build/sit/zyb'
                } ]
            }
        },
        "sftp-deploy" : {
            it : {
                auth : {
                    host : '10.196.112.41',
                    port : 22,
                    authKey : {
                        "username" : "user1",
                        "password" : "kfuser1123"
                    }
                },
                src : './build/sit/zyb',
                dest : '/home/user1/app/project/zyb',
                // exclusions: ['build', '*.bat', '*.json', 'node_modules',
                // 'Gruntfile.js'],
                serverSep : '/',
                localSep : '/',
                concurrency : 6
            },
            sit1 : {
                auth : {
                    host : '10.196.112.22',
                    port : 22,
                    authKey : {
                        "username" : "user1",
                        "password" : "U6JNEbRJ"
                    }
                },
                src : './build/sit/zyb',
                dest : '/home/user1/app/project/zyb',
                // exclusions: ['build', '*.bat', '*.json', 'node_modules',
                // 'Gruntfile.js'],
                serverSep : '/',
                localSep : '/',
                concurrency : 6
            },
            sit2 : {
                auth : {
                    host : '10.196.112.16',
                    port : 22,
                    authKey : {
                        "username" : "user1",
                        "password" : "stuser1123"
                    }
                },
                src : './build/sit/zyb',
                dest : '/home/user1/app/project/zyb',
                // exclusions: ['build', '*.bat', '*.json', 'node_modules',
                // 'Gruntfile.js'],
                serverSep : '/',
                localSep : '/',
                concurrency : 6
            }
        }
    });
    // 加载插件
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-replace');
    grunt.loadNpmTasks('grunt-sftp-deploy');

    // 任务列表
    grunt.registerTask('test', [ 'cssmin:sit' ]);
    grunt.registerTask('all', ['clean:sit', 'copy:sit', 'replace:sit'])
    grunt.registerTask('default', [  'copy:sit', 'replace:sit']);
    grunt.registerTask('sit001', ['replace:sit_001']);
    grunt.registerTask('prod', ['copy:prod', 'replace:sit']);
    grunt.registerTask('it', [ 'sftp-deploy:it' ]);
    grunt.registerTask('st', [ 'sftp-deploy:sit1',          'sftp-deploy:sit2' ]);

}

每个目标的具体设置,需要参考该模板的文档。就cssmin来讲,minify目标的参数具体含义如下:

expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
cwd:需要处理的文件(input)所在的目录。
src:表示需要处理的文件。如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符。
dest:表示处理后的文件名或所在目录。
ext:表示处理后的文件后缀名。
grunt常用模块:
grunt-contrib-clean:删除文件。
grunt-contrib-compass:使用compass编译sass文件。
grunt-contrib-concat:合并文件。
grunt-contrib-copy:复制文件。
grunt-contrib-cssmin:压缩以及合并CSS文件。
grunt-contrib-imagemin:图像压缩模块。
grunt-contrib-jshint:检查JavaScript语法。
grunt-contrib-uglify:压缩以及合并JavaScript文件。
grunt-contrib-watch:监视文件变动,做出相应动作。
运行grunt
运行所有任务
grunt
运行指定任务
grunt prod
常见问题
这里写图片描述
解决:npm install grunt –save-dev
成功:
这里写图片描述
build目录下有打包好的文件,直接用就好。

猜你喜欢

转载自blog.csdn.net/weixin_40970987/article/details/82744255