java 混淆压缩css js_Grunt 压缩html、css，混淆+压缩js

Grunt 压缩html、css，混淆+压缩js，所有文件不会变成一个文件

// 包装函数

module.exports = function (grunt) {

// 任务配置,所有插件的配置信息

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

//混淆，压缩js

uglify: {

my_target: {//任务1

files: [{

expand: true,//表示分开压缩/混淆下面的每一个文件

cwd: 'script',//js目录下

//src:'**/*.js',//所有js文件

src: ['**/*.js', '!**/*.min.js'],//所有js文件,不包含某个min.js

//src:['**/*.js','!**/libscript/**'],//忽略文件夹

dest: 'dist/script'//输出到此目录下

}]

}

},

//压缩CSS

cssmin: {

target:{

files: [{

expand: true,

cwd: 'css',

src: ['**/*.css', '!**/*.min.css'],

dest: 'dist/css'

}]

}

},

//压缩html

htmlmin: {

dynamic: {

options: {

removeComments: true, //移除注释

collapseWhitespace: false//无用空格，false为不删除

},

files: [{

expand: true,

cwd: 'html',

src: ['**/*.html'],

dest: 'dist/html'

}]

}

}

});

// 告诉grunt我们将使用插件

grunt.loadNpmTasks('grunt-contrib-uglify-es');

grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt.loadNpmTasks('grunt-contrib-htmlmin');

// 告诉grunt当我们在终端中输入grunt时需要做些什么

grunt.registerTask('default', ['uglify', 'cssmin', 'htmlmin']);

};

TO4@OKQ`_{A}6F[LH8$2N]C.png

哎，不能偷懒啊，该写明白的还是得写明白，否则自己都是看着一脸懵逼

补充:

第一步：创建文件夹取名为：grunttest

第二步：进入官网 在grunttest文件夹下面创建package.json并且复制下面的代码

{

"name": "my-project-name",

"version": "0.1.0",

"devDependencies": {

"grunt": "^1.0.3",

"grunt-contrib-cssmin": "^3.0.0",

"grunt-contrib-htmlmin": "^3.0.0",

"grunt-contrib-jshint": "latest",

"grunt-contrib-nodeunit": "latest",

"grunt-contrib-uglify-es": "^3.3.0"

}

}

111.png

然后执行这个命令，安装最新的grunt (当然你要进入到目录里面去执行下面的代码)

npm install grunt --save-dev

等待下载成功后会多出node_modules文件夹，继续

npm install grunt-contrib-uglify-es --save-dev

npm install grunt-contrib-cssmin --save-dev

npm install grunt-contrib-htmlmin --save-dev

然后创建Gruntfile.js文件

// 包装函数

module.exports = function (grunt) {

// 任务配置,所有插件的配置信息

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

//混淆，压缩js

uglify: {

my_target: {//任务1

files: [{

expand: true,//表示分开压缩/混淆下面的每一个文件

cwd: 'script',//js目录下

//src:'**/*.js',//所有js文件

src: ['**/*.js', '!**/*.min.js'],//所有js文件,不包含某个min.js

//src:['**/*.js','!**/libscript/**'],//忽略文件夹

dest: 'dist/js'//输出到此目录下

}]

}

},

//压缩CSS

cssmin: {

target:{

files: [{

expand: true,

cwd: 'css',

src: ['**/*.css', '!**/*.min.css'],

dest: 'dist/css'

}]

}

},

//压缩html

htmlmin: {

dynamic: {

options: {

removeComments: true, //移除注释

collapseWhitespace: true//无用空格

},

files: [{

expand: true,

cwd: 'html',

src: ['**/*.html'],

dest: 'dist/html'

}]

}

}

});

// 告诉grunt我们将使用插件

grunt.loadNpmTasks('grunt-contrib-uglify-es');

grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt.loadNpmTasks('grunt-contrib-htmlmin');

// 告诉grunt当我们在终端中输入grunt时需要做些什么

grunt.registerTask('default', ['uglify', 'cssmin', 'htmlmin']);

};

最后运行代码

grunt

ddd.png

bbb.png

另外说明uglify不支持ES6的语法。。。。但是这个uglify-es是支持的。

还有比如我想获取grunt-contrib-uglify最新的版本，直接google搜索到后，进入它的gitHub，就能看到版本了

ccc.png

当你换了最新的版本后，需要重新执行一遍，否则是会报错滴

npm install grunt-contrib-uglify --save-dev