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

学习参考网址 grunt使用小记之uglify：最全的uglify使用DEMO

gitHub