Grunt入门学习 - Gruntfile具体示例

Posted 2020-09-26 益州府龙骑校尉

　　经过前面的学习，将测试的Gruntfile整合在一起！

/**
 * Created by Administrator on 2017/6/22.
 */
module.exports = function(grunt){
    "use strict";
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),   //将存储在package.json文件中的grunt 版本信息和各个插件的数据信息引入到grunt config中
        copy: {     //copy任务，把所有文件拷贝到功能代码目录下，即EngineeringCode目录
            module_target: {    //copy任务目标,任务名是固定的“任务名称”属性，目标名可以随意定，不重复就行
                files: [{   //files特性，表示执行任务目标时，会自动新建固定名称的文件夹，比如scripts，style等
                    expand: true,
                    cwd: "SourceCode/",     //所有src指定的匹配都将相对于此处指定的路径（即该路径是基础路径，但不包括此路径）
                    src: [\'**/*\'],
                    dest: "EngineeringCode/",       //dest 生成的目标文件路径前缀，即重新生成的这些文件后放到什么位置。
                    filter: "isFile",
                    extDot: \'first\'
                }]
            }
        },

        concat: {   //将指定目录下的js文件拼接成一个js文件，CSS文件拼接成一个CSS文件
            options: {
                separator: \';\',
                stripBanners: true,
                banner: \'/*! hello - v1.2.3 - 2014-2-4 */\'
            },
            dist: { //concat任务目标1，将EngineeringCode/VarMesSignMan下的所有js文件拼接成一个.min.js文件
                //files:[{
                //    expand: true,
                //    cwd: "EngineeringCode/",
                //    src: [\'**/*.js\'],
                //    dest: "EngineeringCode/zipFile/all.js",
                //    //ext: ".min.js",
                //    //extDot: \'first\'
                //}]
                src: "EngineeringCode/**/*.js",    //将EngineeringCode目录下包括子文件夹下的所有css文件
                dest: "EngineeringCode/zipFile/scripts/all.js"  //合并到dest路径下名为all.js的文件
            },
            dist2: {    //concat任务目标2，将EngineeringCode/VarMesSignMan下的所有css文件拼接成一个.min.css文件
                src: "EngineeringCode/**/*.css",    //EngineeringCode目录下包括子文件夹下的所有css文件
                dest: "EngineeringCode/zipFile/style/all.css"  //合并到dest路径下名为all.css 的文件
            }
        },

        cssmin: {   //cssmin任务，将指定目录下的css文件压缩成 .min.css文件
            options: {
                separator: \';\',
                stripBanners: true,
                banner: \'/*! hello - v1.2.3 - 2014-2-4 */\'
            },
            my_target:{     //cssmin任务目标1，将EngineeringCode/VarMesSignMan下的所有css文件压缩成.min.css文件
                files: [{
                        expand: true,
                        cwd: \'EngineeringCode/VarMesSignMan/style\',  //所有src指定的匹配都将相对于此处指定的路径（即该路径是基础路径，但不包括此路径）
                        src: \'**/*.css\',
                        dest: \'EngineeringCode/VarMesSignMan/style\',    //dest 生成的目标文件路径前缀，即重新生成的这些文件后放到什么位置。
                        ext: ".min.css",     //ext 对于生成的dest路径中所有实际存在文件，均使用这个属性值替换扩展名。
                        extDot: \'first\'     //extDot 用于指定标记扩展名的英文点号的所在位置。可以赋值 \'first\' （扩展名从文件名中的第一个英文点号开始） 或 \'last\' （扩展名从最后一个英文点号开始），默认值为 \'first\'
                    }]
            },
            my_target2:{    //cssmin任务目标2，将EngineeringCode/BiInterface下的所有css文件压缩成.min.css文件
                files: [{
                    expand: true,
                    cwd: \'EngineeringCode/BiInterface/style\',
                    src: \'**/*.css\',
                    dest: \'EngineeringCode/BiInterface/style\',
                    ext: ".min.css",
                    extDot: \'first\'
                }]
            }
        },

        uglify: {   //uglify任务，将指定目录下的js文件压缩成 .min.js文件
            options: {
                separator: \';\',
                stripBanners: true,
                banner: \'/*! hello - v1.2.3 - 2014-2-4 */\'
            },
            my_target:{  //uglify任务目标1，将EngineeringCode/VarMesSignMan下的所有js文件压缩成.min.js文件
                files: [{
                    expand: true,
                    cwd: \'EngineeringCode/VarMesSignMan/scripts\',
                    src: \'**/*.js\',
                    dest: \'EngineeringCode/VarMesSignMan/scripts\',
                    ext: ".min.js",
                    extDot: \'first\'
                }]
            },
            my_target2:{    //uglify任务目标2，将EngineeringCode/BiInterface下的所有js文件压缩成.min.js文件
                files: [{
                    expand: true,
                    cwd: \'EngineeringCode/BiInterface/scripts\',
                    src: \'**/*.js\',
                    dest: \'EngineeringCode/BiInterface/scripts\',
                    ext: ".min.js",
                    extDot: \'first\'
                }]
            }
        },

        clean: {  //clean任务，将指定目录下的指定格式文件删除
            js: {  //clean任务目标1，将EngineeringCode目录下的所有非 .min.js文件删除
                src: [\'EngineeringCode/**/*.js\',\'!EngineeringCode/**/*min.js\',\'!EngineeringCode/**/*all.js\']
            },
            css: {  //clean任务目标2，将EngineeringCode目录下的所有非 .min.css文件删除
                src: [\'EngineeringCode/**/*.css\',\'!EngineeringCode/**/*min.css\',\'!EngineeringCode/**/*all.css\']
            }
        }
    });

    grunt.loadNpmTasks("grunt-contrib-copy");   //加载能够提供"copy"任务的插件。加载其他插件和此方法相同
    grunt.loadNpmTasks("grunt-contrib-concat");
    grunt.loadNpmTasks("grunt-contrib-cssmin");
    grunt.loadNpmTasks("grunt-contrib-uglify");  //加载能够提供"uglify"任务的插件。加载其他插件和此方法相同
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.loadNpmTasks("grunt-contrib-clean");

    grunt.registerTask("default",["copy:module_target","concat","cssmin","uglify","clean"]);  //通过定义 default 任务，可以让Grunt默认执行一个或多个任务。
};

 

　　最后，取个巧，如果不想在命令行执行grunt命令，可以利用bat批处理文件自动执行grunt任务。

　　编写一个bat文件来执行grunt任务。测试项目位于E盘FrontEndCompression目录下，bat文件具体如下。保存后，双击运行该bat就能够自动压缩构建模块了。

@echo off
title 【文件压缩处理】
color  03f
echo minify javascript and css with grunt 

E:
cd E:\\\\Work_Test\\\\FrontEndCompression\\\\SourceCode
grunt

echo Press any key to continue....
pause

 

　　根目录文件夹下所有文件

　　

　　未执行 grunt 时，EngineeringCode现为空文件夹

　　

　　在执行 grunt 后，完成了将SourceCode文件夹内的文件拷贝到EngineeringCode文件夹内的一系列操作！