Gruntfile.js

Posted 2020-06-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Gruntfile.js相关的知识，希望对你有一定的参考价值。

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),
        clean: {
            Task_001: {
                expand: true,
                src: [‘build/**‘, ‘www/**‘]
            }
        },
        uglify: //js代码压缩 {
        options: {
            mangle: false,
            //不混淆变量名
            //stripBanners:‘all‘,
            //banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n‘, //添加header
            //footer:‘\n/*! <%= pkg.name %> 最后修改于： <%= grunt.template.today("yyyy-mm-dd") %> */‘//添加footer
        },
        Task_001: //任务一 {
        files: [{
            expand: true,
            //如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
            cwd: "src/js",
            //src目录下
            src: "**/*.js",
            //所有的文件夹中的js文件
            dest: "build/js" //放在build文件夹中的js文件夹中
        }, {
            expand: true,
            //如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
            cwd: "src/js",
            //src目录下
            src: "*.js",
            //所有的js文件
            dest: "build/js" //放在build文件夹中的js文件夹中
        }]
    }
    }, connect: {
        Task_001: {
            options: {
                port: 8060,
                hostname: ‘*‘,
                open: true,
                keepalive: true,
                onCreateServer: function(server, connect, options) {
                    console.log(server);
                    console.log(connect);
                    console.log(options);
                }
            }
        }
    }

    cssmin: {
        options: {
            report: ‘gzip‘
        },
        Task_001: {
            files: [{
                expand: true,
                //如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
                cwd: ‘src/css‘,
                //css目录下
                src: "**/*.css",
                //所有的文件夹中的css文件
                dest: "build/css" //放在build文件夹中的css文件夹中
            }, {
                expand: true,
                //如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
                cwd: ‘src/css‘,
                //css目录下
                src: "*.css",
                //所有的css文件
                dest: "build/css" //放在build文件夹中的css文件夹中
            }]
        }
    },
    imagemin: {
        Task_001: {
            options: {
                optimizationLevel: 3 //定义 PNG 图片优化水平
            },
            files: [{
                expand: true,
                //如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
                cwd: ‘src/images‘,
                //images目录下
                src: ‘*.{png,jpg,jpeg,gif}‘,
                //所有的img文件
                dest: ‘build/images‘ //放在build文件夹中的images文件夹中
            }, {
                expand: true,
                //如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
                cwd: ‘src/images‘,
                //images目录下
                src: ‘**/*.{png,jpg,jpeg,gif}‘,
                //所有的img文件
                dest: ‘build/images‘ //放在build文件夹中的images文件夹中
            }]
        }
    },
    htmlmin: {
        //https: //www.npmjs.com/package/html-minifier
        options: {
            removeComments: true,
            //删除html注释
            removeCommentsFromCDATA: true,
            //删除带HTML注释脚本和样式
            removeCDATASectionsFromCDATA: true,
            //从脚本删除CDATA节和风格元素
            collapseWhitespace: true,
            //崩溃的空白,导致文本节点在文档树。
            conservativeCollapse: true,
            //总是省略空间必须使用与collapseWhitespace = true
            collapseInlineTagWhitespace: true,
            //之间不要留下任何空间显示:内联元素时崩溃。必须使用与collapseWhitespace = true
            preserveLineBreaks: false,
            //(false既开启超级压缩)总是省略换行之间的空白标签包含一个换行符。必须使用与collapseWhitespace = true
            collapseBooleanAttributes: true,
            //省略属性值从布尔属性
            removeTagWhitespace: true,
            //尽可能消除之间的空间属性。
            removeAttributeQuotes: true,
            //删除引号属性。
            removeRedundantAttributes: true,
            //删除属性值匹配时违约。
            preventAttributesEscaping: true,
            //防止逃跑的属性的值。
            useShortDoctype: true,
            //替换的doctype短(HTML5)doctype
            removeEmptyAttributes: true,
            //删除所有空格作属性值
            removeScriptTypeAttributes: true,
            //删除type = " text / javascript脚本标签。其他类型属性值剩下完好无损。
            removeStyleLinkTypeAttributes: true,
            //删除类型= " text / css "从风格和链接标记。其他类型属性值剩下完好无损
            removeOptionalTags: true,
            //删除没有要求标签
            removeEmptyElements: true,
            //删除所有元素空内容
            keepClosingSlash: true,
            //保持尾部的斜杠单元素
            caseSensitive: true,
            //以区分大小写的方式处理属性(用于自定义HTML标记。)
            minifyJS: true,
            //压缩Javascript脚本元素和事件属性(使用UglifyJS)
            minifyCSS: true,
            //压缩CSS样式元素和风格属性(使用clean-css)
            minifyURLs: true,
            //压缩url在不同属性(使用relateurl)
            includeAutoGeneratedTags: true,
            //插入标记生成的HTML解析器
            quoteCharacter: true //类型的引用使用属性值(“或”)
        },
        Task_001: {
            files: [{
                expand: true,
                //如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
                cwd: "src/app",
                //app目录下
                src: "**/*.html",
                //所有的文件夹中的html文件
                dest: "build/app" //放在build文件夹中的html文件夹中
            }, {
                expand: true,
                //如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
                cwd: "src/app",
                //html目录下
                src: "*.html",
                //所有的html文件
                dest: "build/app" //放在build文件夹中的html文件夹中
            }]
        }
    },
    copy: //将编译好的文件，复制到我的项目中
    {
        Task_001: {
            files: [{
                expand: true,
                cwd: ‘build‘,
                src: ‘**‘,
                dest: ‘www‘
            }]
        }
    },
    watch: //自动监听文件的保存并执行指定的任务
    {
        Task_001: //任务一
        {
            files: [‘src/js/*.js‘, ‘src/css/*.css‘, ‘src/app/*.html‘],
            tasks: [‘uglify‘, ‘cssmin‘, ‘htmlmin‘, ‘copy‘],
            options: {
                spawn: false,
                livereload: true
            }
        }
    }
});