grunt构建项目打包上传

一时失言乱红尘 2022-05-12 11:16 203阅读 0赞

**全局安装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  
**常见问题**  
![这里写图片描述][70]  
解决：npm install grunt --save-dev  
成功：  
![这里写图片描述][70 1]  
build目录下有打包好的文件，直接用就好。

[70]: /images/20220512/c71325b87b5e479b960ac2082fb98404.png
[70 1]: /images/20220512/bd5f998f6a2446bda9900f4636ecaee4.png