grunt压缩js和css文件(1)

压缩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

//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")}

//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")}

//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")}