Grunt是一個(gè)JavaScript任務(wù)運(yùn)行器
Grunt基于Node.js，用JS 開發(fā)驳棱，這樣就可以借助Node.js實(shí)現(xiàn)跨系統(tǒng)跨平臺(tái)的桌面端的操作，例如文件操作等等。此外叭喜，Grunt以及它的插件們，都作為一個(gè)包堤框，可以用 NPM 安裝進(jìn)行管理域滥。
古老的構(gòu)建工具，基本很少用了
操作步驟
npm install -g grunt-cli 安裝grunt的命令行工具
npm init 生成package.json文件
npm install grunt --save-dev 安裝grunt并加入到依賴
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect 安裝常用插件并加入到依賴
其中 :
合并文件：grunt-contrib-concat
語法檢查：grunt-contrib-jshint
Scss 編譯：grunt-contrib-sass
壓縮文件：grunt-contrib-uglify
監(jiān)聽文件變動(dòng)：grunt-contrib-watch
建立本地服務(wù)器：grunt-contrib-connect
angular 緩存模板 : grunt-angular-templates
復(fù)制文件 : grunt-contrib-copy
刪除文件 : grunt-contrib-clean
壓縮以及合并CSS文件 : grunt-contrib-cssmin
圖像壓縮模塊 : grunt-contrib-imagemin主目錄下創(chuàng)建Gruntfile.js,并進(jìn)行配置
輸入grunt執(zhí)行default,或 grunt 對(duì)應(yīng)名 執(zhí)行對(duì)應(yīng)操作
js壓縮uglify示例:
module.exports = function(grunt) {
// 配置任務(wù)
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),//固定寫法
uglify: {
options: {//通用配置(會(huì)被私有配置覆蓋)
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
footer:'\n/*! 我是footer */'
},
builda: {//按原目錄批量壓縮
expand:true,//允許使用占位符*代替其他字符
cwd:'oldjs',//只壓縮該目錄下的文件
src: '**/*.js',//**表示任意包括/和空,因此可以用于表示多層文件
dest: 'newjs',//目標(biāo)文件夾
ext:'.min.js'//壓縮文件后綴名
},
buildb:{
options:{//私有配置
mangle:false,//不進(jìn)行代碼混淆
banner:'//hello nihao\n'
},
files:{
'out/out.js':['jss/**/*.js','src/hello.js']//合并壓縮
}
}
}
});
//加載插件
grunt.loadNpmTasks('grunt-contrib-uglify');//加載插件
//任務(wù)注冊(cè)
grunt.registerTask('aa', ['uglify:builda']);
grunt.registerTask('bb', ['uglify:buildb']);//輸入grunt bb則運(yùn)行uglify中的buildb方法
grunt.registerTask('default', ['uglify']);//輸入grunt 即可運(yùn)行整個(gè)uglify
};
熊貓保保
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
//jshint
jshint: {
all: [
'anniversary/js/controllers**.js',
],
options: {
jshintrc: true
}
},
//清空 .build目錄
clean: ['.build/'],
//將所有模版文件加入緩存
ngtemplates: {
pandaTemplates: {
src: ['commonPartials/**/*.html', 'panda/partials/**/**.html'],
dest: 'panda/js/templates.js',
options: {
prefix: '/',
htmlmin: {
collapseWhitespace: true,
collapseBooleanAttributes: true
},
standalone: true
}
},
productsTemplates: {
src: ['commonPartials/**/*.html', 'products/partials/**/**.html'],
dest: 'products/js/templates.js',
options: {
prefix: '/',
htmlmin: {
collapseWhitespace: true,
collapseBooleanAttributes: true
},
standalone: true
}
},
weaselTemplates: {
src: ['commonPartials/**/*.html', 'weasel/partials/**/**.html'],
dest: 'weasel/js/templates.js',
options: {
prefix: '/',
htmlmin: {
collapseWhitespace: true,
collapseBooleanAttributes: true
},
standalone: true
}
},
okpandaTemplates: {
src: ['okpanda/partials/**/**.html'],
dest: 'okpanda/js/templates.js',
options: {
prefix: '/',
htmlmin: {
collapseWhitespace: true,
collapseBooleanAttributes: true
},
standalone: true
}
},
ruihengTemplates: {
src: ['ruiheng/partials/**/**.html'],
dest: 'ruiheng/js/templates.js',
options: {
prefix: '/',
htmlmin: {
collapseWhitespace: true,
collapseBooleanAttributes: true
},
standalone: true
}
}, activityTemplates: {
src: ['activity/partials/**/**.html'],
dest: 'activity/js/templates.js',
options: {
prefix: '/',
htmlmin: {
collapseWhitespace: true,
collapseBooleanAttributes: true
},
standalone: true
}
}, claimTemplates: {
src: ['claim/partials/**/**.html'],
dest: 'claim/js/templates.js',
options: {
prefix: '/',
htmlmin: {
collapseWhitespace: true,
collapseBooleanAttributes: true
},
standalone: true
}
}, vehicleTemplates: {
src: ['vehicle/partials/**/**.html'],
dest: 'vehicle/js/templates.js',
options: {
prefix: '/',
htmlmin: {
collapseWhitespace: true,
collapseBooleanAttributes: true
},
standalone: true
}
},
reservationTemplates: {
src: ['reservation/partials/**/**.html'],
dest: 'reservation/js/templates.js',
options: {
prefix: '/',
htmlmin: {
collapseWhitespace: true,
collapseBooleanAttributes: true
},
standalone: true
}
}
},
//復(fù)制文件到.build目錄
copy: {
main: {
files: [
{
expand: true,
cwd: './',
src: ['index.html', 'favicon.ico', 'spa.appcache', 'version.json', 'images/**/*', 'commonPartials/**/*'],
dest: '.build/'
}, {
expand: true,
cwd: './',
src: ['products/index.html', 'products/iframe.html', 'products/images/**', 'products/js/app.js'],
dest: '.build/'
}, {
expand: true,
cwd: './',
src: ['panda/*.html', 'panda/images/**', 'panda/js/app.js'],
dest: '.build/'
}, {
expand: true,
cwd: './',
src: ['weasel/index.html', 'weasel/images/**', 'weasel/js/app.js'],
dest: '.build/'
}, {
expand: true,
cwd: './',
src: ['okpanda/index.html', 'okpanda/images/**', 'okpanda/js/app.js'],
dest: '.build/'
}, {
expand: true,
cwd: './',
src: ['ruiheng/index.html', 'ruiheng/images/**', 'ruiheng/js/app.js'],
dest: '.build/'
}, {
expand: true,
cwd: './',
src: ['activity/index.html', 'activity/images/**', 'activity/js/app.js'],
dest: '.build/'
}, {
expand: true,
cwd: './',
src: ['claim/index.html', 'claim/images/**', 'claim/js/app.js'],
dest: '.build/'
}, {
expand: true,
cwd: './',
src: ['vehicle/index.html', 'vehicle/images/**', 'vehicle/js/app.js'],
dest: '.build/'
}, {
expand: true,
cwd: './',
src: ['reservation/index.html', 'reservation/images/**', 'reservation/js/app.js'],
dest: '.build/'
}
]
}
},
//將所有js壓縮成一個(gè)
uglify: {
options: {
mangle: true
},
products: {
files: {
'.build/products/js/app.js': ['js/**/*.js', '.build/products/js/app.js', 'products/js/**/*.js', '!products/js/app.js', '!products/js/controllers.js']
}
},
panda: {
files: {
'.build/panda/js/app.js': ['js/**/*.js', '.build/panda/js/app.js', 'panda/js/**/*.js', '!panda/js/app.js'],
}
},
weasel: {
files: {
'.build/weasel/js/app.js': ['js/**/*.js', '.build/weasel/js/app.js', 'weasel/js/**/*.js', '!weasel/js/app.js']
}
},
okpanda: {
files: {
'.build/okpanda/js/app.js': ['js/**/*.js', '.build/okpanda/js/app.js', 'okpanda/js/**/*.js', '!okpanda/js/app.js']
}
},
ruiheng: {
files: {
'.build/ruiheng/js/app.js': ['js/**/*.js', '.build/ruiheng/js/app.js', 'ruiheng/js/**/*.js', '!ruiheng/js/app.js', '!ruiheng/js/componentJS/**']
}
}
,
activity: {
files: {
'.build/activity/js/app.js': ['js/**/*.js', '.build/activity/js/app.js', 'activity/js/**/*.js', '!activity/js/app.js', '!activity/js/componentJS/**']
}
}, claim: {
files: {
'.build/claim/js/app.js': ['js/**/*.js', '.build/claim/js/app.js', 'claim/js/**/*.js', '!claim/js/app.js', '!claim/js/componentJS/**']
}
}, vehicle: {
files: {
'.build/vehicle/js/app.js': ['js/**/*.js', '.build/vehicle/js/app.js', 'vehicle/js/**/*.js', '!vehicle/js/app.js', '!vehicle/js/componentJS/**']
}
}, reservation: {
files: {
'.build/reservation/js/app.js': ['js/**/*.js', '.build/reservation/js/app.js', 'reservation/js/**/*.js', '!reservation/js/app.js', '!reservation/js/componentJS/**']
}
}
},
stripDebug: {
dist: {
files: {
'.build/products/js/app.js': '.build/products/js/app.js',
'.build/panda/js/app.js': '.build/panda/js/app.js',
'.build/weasel/js/app.js': '.build/weasel/js/app.js',
'.build/okpanda/js/app.js': '.build/okpanda/js/app.js',
'.build/ruiheng/js/app.js': '.build/ruiheng/js/app.js',
'.build/activity/js/app.js': '.build/activity/js/app.js',
'.build/claim/js/app.js': '.build/claim/js/app.js',
'.build/vehicle/js/app.js': '.build/vehicle/js/app.js',
'.build/reservation/js/app.js': '.build/reservation/js/app.js'
}
}
},
//壓縮css文件
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: {
'.build/panda/css/app.css': ['panda/css/*.css', 'css/*.css'],
'.build/products/css/app.css': ['products/css/*.css', 'css/*.css'],
'.build/weasel/css/app.css': ['weasel/css/*.css', 'css/*.css'],
'.build/okpanda/css/app.css': ['okpanda/css/*.css', 'css/*.css'],
'.build/ruiheng/css/app.css': ['ruiheng/css/*.css', 'css/*.css'],
'.build/activity/css/app.css': ['activity/css/*.css', 'css/*.css'],
'.build/claim/css/app.css': ['claim/css/*.css', 'css/*.css'],
'.build/vehicle/css/app.css': ['vehicle/css/*.css', 'css/*.css'],
'.build/reservation/css/app.css': ['reservation/css/*.css', 'css/*.css']
}
}
},
concat: {
panda: {
files: {
'.build/panda/js/app.js': ['.build/panda/js/app.js'],
'.build/panda/index.html': ['.build/panda/index.html']
},
options: {
process: function (src, filepath) {
if (filepath.endsWith('app.js')) {
src = src.replace('$compileProvider.debugInfoEnabled(true);', '$compileProvider.debugInfoEnabled(false);');
return src.replace('/*templates-here*/', "'pandaTemplates',");
}
if (filepath.endsWith('index.html')) {
var start = src.indexOf('<!--start customize js-->') + '<!--start customize js-->'.length;
var end = src.indexOf('<!--end customize js-->');
src = src.replace(src.substring(start, end), '<script src="js/app.js?v=' + (new Date()).getTime() + '"></script>');
start = src.indexOf('<!--start customize css-->') + '<!--start customize css-->'.length;
end = src.indexOf('<!--end customize css-->');
return src.replace(src.substring(start, end), '<link href="css/app.css?="' + (new Date()).getTime() + ' rel="stylesheet">');
}
}
}
},
products: {
files: {
'.build/products/js/app.js': ['.build/products/js/app.js'],
'.build/products/index.html': ['.build/products/index.html']
},
options: {
process: function (src, filepath) {
if (filepath.endsWith('app.js')) {
src = src.replace('$compileProvider.debugInfoEnabled(true);', '$compileProvider.debugInfoEnabled(false);');
return src.replace('/*templates-here*/', "'productsTemplates',");
}
if (filepath.endsWith('index.html')) {
var start = src.indexOf('<!--start customize js-->') + '<!--start customize js-->'.length;
var end = src.indexOf('<!--end customize js-->');
src = src.replace(src.substring(start, end), '<script src="js/app.js?v=' + (new Date()).getTime() + '"></script>');
start = src.indexOf('<!--start customize css-->') + '<!--start customize css-->'.length;
end = src.indexOf('<!--end customize css-->');
return src.replace(src.substring(start, end), '<link href="css/app.css?="' + (new Date()).getTime() + ' rel="stylesheet">');
}
}
}
},
weasel: {
files: {
'.build/weasel/js/app.js': ['.build/weasel/js/app.js'],
'.build/weasel/index.html': ['.build/weasel/index.html']
},
options: {
process: function (src, filepath) {
if (filepath.endsWith('app.js')) {
src = src.replace('$compileProvider.debugInfoEnabled(true);', '$compileProvider.debugInfoEnabled(false);');
return src.replace('/*templates-here*/', "'weaselTemplates',");
}
if (filepath.endsWith('index.html')) {
var start = src.indexOf('<!--start customize js-->') + '<!--start customize js-->'.length;
var end = src.indexOf('<!--end customize js-->');
src = src.replace(src.substring(start, end), '<script src="js/app.js?v=' + (new Date()).getTime() + '"></script>');
start = src.indexOf('<!--start customize css-->') + '<!--start customize css-->'.length;
end = src.indexOf('<!--end customize css-->');
return src.replace(src.substring(start, end), '<link href="css/app.css?="' + (new Date()).getTime() + ' rel="stylesheet">');
}
}
}
},
okpanda: {
files: {
'.build/okpanda/js/app.js': ['.build/okpanda/js/app.js'],
'.build/okpanda/index.html': ['.build/okpanda/index.html']
},
options: {
process: function (src, filepath) {
if (filepath.endsWith('app.js')) {
src = src.replace('$compileProvider.debugInfoEnabled(true);', '$compileProvider.debugInfoEnabled(false);');
return src.replace('/*templates-here*/', "'okpandaTemplates',");
}
if (filepath.endsWith('index.html')) {
var start = src.indexOf('<!--start customize js-->') + '<!--start customize js-->'.length;
var end = src.indexOf('<!--end customize js-->');
src = src.replace(src.substring(start, end), '<script src="js/app.js?' + (new Date()).getTime() + '"></script>');
start = src.indexOf('<!--start customize css-->') + '<!--start customize css-->'.length;
end = src.indexOf('<!--end customize css-->');
return src.replace(src.substring(start, end), '<link href="css/app.css?="' + (new Date()).getTime() + ' rel="stylesheet">');
}
}
}
},
ruiheng: {
files: {
'.build/ruiheng/js/app.js': ['.build/ruiheng/js/app.js'],
'.build/ruiheng/index.html': ['.build/ruiheng/index.html']
},
options: {
process: function (src, filepath) {
if (filepath.endsWith('app.js')) {
src = src.replace('$compileProvider.debugInfoEnabled(true);', '$compileProvider.debugInfoEnabled(false);');
return src.replace('/*templates-here*/', "'ruihengTemplates',");
}
if (filepath.endsWith('index.html')) {
var start = src.indexOf('<!--start customize js-->') + '<!--start customize js-->'.length;
var end = src.indexOf('<!--end customize js-->');
src = src.replace(src.substring(start, end), '<script src="js/app.js?' + (new Date()).getTime() + '"></script>');
start = src.indexOf('<!--start customize css-->') + '<!--start customize css-->'.length;
end = src.indexOf('<!--end customize css-->');
return src.replace(src.substring(start, end), '<link href="css/app.css?="' + (new Date()).getTime() + ' rel="stylesheet">');
}
}
}
},
activity: {
files: {
'.build/activity/js/app.js': ['.build/activity/js/app.js'],
'.build/activity/index.html': ['.build/activity/index.html']
},
options: {
process: function (src, filepath) {
if (filepath.endsWith('app.js')) {
src = src.replace('$compileProvider.debugInfoEnabled(true);', '$compileProvider.debugInfoEnabled(false);');
return src.replace('/*templates-here*/', "'activityTemplates',");
}
if (filepath.endsWith('index.html')) {
var start = src.indexOf('<!--start customize js-->') + '<!--start customize js-->'.length;
var end = src.indexOf('<!--end customize js-->');
src = src.replace(src.substring(start, end), '<script src="js/app.js?' + (new Date()).getTime() + '"></script>');
start = src.indexOf('<!--start customize css-->') + '<!--start customize css-->'.length;
end = src.indexOf('<!--end customize css-->');
return src.replace(src.substring(start, end), '<link href="css/app.css?="' + (new Date()).getTime() + ' rel="stylesheet">');
}
}
}
}, claim: {
files: {
'.build/claim/js/app.js': ['.build/claim/js/app.js'],
'.build/claim/index.html': ['.build/claim/index.html']
},
options: {
process: function (src, filepath) {
if (filepath.endsWith('app.js')) {
src = src.replace('$compileProvider.debugInfoEnabled(true);', '$compileProvider.debugInfoEnabled(false);');
return src.replace('/*templates-here*/', "'claimTemplates',");
}
if (filepath.endsWith('index.html')) {
var start = src.indexOf('<!--start customize js-->') + '<!--start customize js-->'.length;
var end = src.indexOf('<!--end customize js-->');
src = src.replace(src.substring(start, end), '<script src="js/app.js?' + (new Date()).getTime() + '"></script>');
start = src.indexOf('<!--start customize css-->') + '<!--start customize css-->'.length;
end = src.indexOf('<!--end customize css-->');
return src.replace(src.substring(start, end), '<link href="css/app.css?="' + (new Date()).getTime() + ' rel="stylesheet">');
}
}
}
},vehicle: {
files: {
'.build/vehicle/js/app.js': ['.build/vehicle/js/app.js'],
'.build/vehicle/index.html': ['.build/vehicle/index.html']
},
options: {
process: function (src, filepath) {
if (filepath.endsWith('app.js')) {
src = src.replace('$compileProvider.debugInfoEnabled(true);', '$compileProvider.debugInfoEnabled(false);');
return src.replace('/*templates-here*/', "'vehicleTemplates',");
}
if (filepath.endsWith('index.html')) {
var start = src.indexOf('<!--start customize js-->') + '<!--start customize js-->'.length;
var end = src.indexOf('<!--end customize js-->');
src = src.replace(src.substring(start, end), '<script src="js/app.js?' + (new Date()).getTime() + '"></script>');
start = src.indexOf('<!--start customize css-->') + '<!--start customize css-->'.length;
end = src.indexOf('<!--end customize css-->');
return src.replace(src.substring(start, end), '<link href="css/app.css?="' + (new Date()).getTime() + ' rel="stylesheet">');
}
}
}
},
reservation: {
files: {
'.build/reservation/js/app.js': ['.build/reservation/js/app.js'],
'.build/reservation/index.html': ['.build/reservation/index.html']
},
options: {
process: function (src, filepath) {
if (filepath.endsWith('app.js')) {
src = src.replace('$compileProvider.debugInfoEnabled(true);', '$compileProvider.debugInfoEnabled(false);');
return src.replace('/*templates-here*/', "'reservationTemplates',");
}
if (filepath.endsWith('index.html')) {
var start = src.indexOf('<!--start customize js-->') + '<!--start customize js-->'.length;
var end = src.indexOf('<!--end customize js-->');
src = src.replace(src.substring(start, end), '<script src="js/app.js?' + (new Date()).getTime() + '"></script>');
start = src.indexOf('<!--start customize css-->') + '<!--start customize css-->'.length;
end = src.indexOf('<!--end customize css-->');
return src.replace(src.substring(start, end), '<link href="css/app.css?="' + (new Date()).getTime() + ' rel="stylesheet">');
}
}
}
}
},
compress: {
main: {
options: {
mode: 'gzip'
},
expand: true,
cwd: '.build/',
src: ['**/*.js'],
dest: '.build/',
ext: '.js.gz'
}
}
});
grunt.loadNpmTasks('grunt-angular-templates');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks("grunt-strip-debug");
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.registerTask('build', ['clean', 'ngtemplates', 'copy', 'concat', 'uglify', 'stripDebug', 'cssmin', 'compress']);
// grunt.registerTask('build', ['clean', 'ngtemplates', 'copy', 'concat', 'uglify', 'cssmin']);
// Register group tasks
//grunt.registerTask('build', [ 'jshint', 'less', 'i18n', 'copyto' ]);
};
