接下来是个人的理解:
压缩js
1、node安装,node会自动安装npm。
安装完之后查看版本:node -v 和 npm -v
2、新建项目后package.json 安装。
命令:npm init(直接一直回车,输入yes之后回车文件夹下就会出现package.json )
注意出错:name不能包含大写字母。
name: (reactJsCssPak2) reactJsCssPak
Sorry, name can no longer contain capital letters.
//package.json
{
"name": "reactpak",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
3、安装grunt命令行工具grunt-cli。
命令: npm install -g grunt-cli
安装完之后查看版本:grunt -version
4、安装grunt及其插件。
npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev ( js语法检查)
npm install grunt-contrib-uglify --save-dev ( 压缩,采用UglifyJS)
npm install grunt-contrib-concat --save-dev ( 合并文件)
或
npm install grunt grunt-contrib-jshint grunt-contrib-uglify grunt-contrib-concat --save-dev
//安装的时候node_modules出现,而且也出现这四个目录,之后package.json也会显示这四个目录(那是因为在安装插件的时候加了"--save-dev")。
{
"name": "reactpak",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-uglify": "^2.3.0"
}
}
5、新建文件Gruntfile.js
新建一个js,里面包含a.js和b.js ,再新建Gruntfile.js。目录如下:
//a.js
function a() {
console.log("aaa")
}
//b.js
function b() {
console.log("bbb")
}
第一种测试:我只想压缩
//Gruntfile.js
module.exports = function(grunt) {
// 配置
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
uglify : {
options : {
banner : '\n'
},
build : {
src : 'js/*.js',
dest : 'dest/dest.min.js'
}
}
});
// 载入uglify插件,压缩
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册任务
grunt.registerTask('default', ['uglify']);
};
//dest.min.js
function a(){console.log("aaa")}function b(){console.log("bbb")}
总结:单个js直接压缩,多个js直接合并压缩。
第二种测试:合并与压缩
//Gruntfile.js
module.exports = function(grunt) {
// 配置
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
concat : {
domop : {
src: ['js/a.js', 'js/b.js'],
dest: 'desttwo/desttwo.js'
}
},
uglify : {
options : {
banner : '\n'
},
build : {
src : 'desttwo/desttwo.js',
dest : 'desttwo/desttwo.min.js'
}
}
});
// 载入concat和uglify插件,分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册任务
grunt.registerTask('default', ['concat', 'uglify']);
};
//desttwo.js
function a() {
console.log("aaa")
}
function b() {
console.log("bbb")
}
//desttwo.min.js
function a(){console.log("aaa")}function b(){console.log("bbb")}
总结:这个过程是先合并再压缩,出现两个js文件。
第三种测试:我想把所有的js单独压缩
//Gruntfile.js
module.exports = function(grunt) {
// 配置
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
uglify : {
options : {
banner : '\n'
},
my_target: {
files: [
{
expand: true,
//相对路径
cwd: 'js/',
src: '*.js',
dest: 'destthree/js/',
rename: function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
// var filename=src;
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.js';
grunt.log.writeln("现处理文件:"+src+" 处理后文件:"+fileresult);
return fileresult;
//return filename + '.min.js';
}
}
]
}
}
});
// 载入concat和uglify插件,分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册任务
grunt.registerTask('default', ['uglify']);
};
//a.min.js
function a(){console.log("aaa")}
//b.min.js
function b(){console.log("bbb")}