grunt构建项目打包上传

75 阅读 0 评论 50 点赞

我是靠谱客的博主善良星星，最近开发中收集的这篇文章主要介绍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 : '',
port : ,
authKey : {
"username" : "",
"password" : ""
}
},
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 : ',
port : ,
authKey : {
"username" : "",
"password" : ""
}
},
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目录下有打包好的文件，直接用就好。