Grunt入门学习(3) - Gruntfile具体示例

  经过前面的学习,将测试的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 时,EngineeringCode现为空文件夹

  

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

  

时间: 2024-11-10 17:40:18

Grunt入门学习(3) - Gruntfile具体示例的相关文章

grunt 入门学习

前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Loading...) JS合并 JS压缩 CSS压缩 CSS Sprite 图片优化 测试 静态资源缓存(版本更新) ... 对应的,一个全副武装的前端可能会是这样的: JSHint CSSLint Jade CoffeeScript RequireJS/SeaJS Compass/Stylus/Le

Retrofit 入门学习

Retrofit 入门学习官方RetrofitAPI 官方的一个例子 public interface GitHubService { @GET("users/{user}/repos") Call<List<Repo>> listRepos(@Path("user") String user); } 这些注解都有一个参数 value,用来配置其路径,比如示例中的 users/{user}/repos, 我们还注意到在构造 Retrofit

angularjs入门学习【指令篇】

一.首先我们来了解下指令API 属性 含义 restrict 申明标识符在模版中作为元素,属性,类,注释或组合,如何使用 priority 设置模版中相对于其他标识符的执行顺序 Template 指定一个字符串式的内嵌模版,如果你指定了模版是一个URL,那么是不会使用的 tempateUrl 指定URL加载的模版,如果你已经指定了内嵌的模版字符串,那么它不会使用的 Replace 如果为真,替换当前元素,如果是假或未指定,拼接到当前元素 Transclude 移动一个标识符的原始字节带你到一个新

OpenGL入门学习

说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640*480分辨率.16色来做吗?显然是不行的. 本帖的目的是让大家放弃TC的老旧图形接口,让大家接触一些新事物. OpenGL作为当前主流的图形API之一,它在一些场合具有比DirectX更优越的特性. 1.与C语言紧密结合. OpenGL命令最初就是用C语言函数来进行描述的,对于学习过C语言的人来讲,OpenGL是容易理解和学习的

Less入门学习总结

Less入门学习总结 一.什么是Less   css的Less好比是js的Jquery,可以让人们更方遍快捷的使用css,使css代码更简洁,可以减少重复的代码,减少开发人员的工作量. Less CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. Less中文手册:less.bootcss.com 二.编译工具 1.Koala:国人开发的LESS/SASS编译工具 下载地址:http:

Grunt入门教程之二 —— concat插件

Grunt入门教程之二 Concat插件 concat是grunt中用来做文件连接的常用插件,比如说你写了一个类库,有三大模块,如: a.js b.js c.js 当你的项目准备发布的时候,你可能需要将这三个模块合并成一个大的模块all.js,这样做可以减少HTTP请求,增快页面的响应速度. 如果我们每次发布的时候又要连接这三个模块,并测试all.js,确保大模块无BUG之后再发布,就显得很蛋疼了.一种好的方式是,每当你修改了其中一个小模块,他都会自动连接成all.js,并且你的项目在开发的时候

【转】机器学习最佳入门学习资料汇总

机器学习最佳入门学习资料汇总 专为机器学习初学者推荐的优质学习资源,帮助初学者快速入门. 这篇文章的确很难写,因为我希望它真正地对初学者有帮助.面前放着一张空白的纸,我坐下来问自己一个难题:面对一个对机器学习领域完全陌生的初学者,我该推荐哪些最适合的库,教程,论文及书籍帮助他们入门? 资源的取舍很让人纠结,我不得不努力从一个机器学习的程序员和初学者的角度去思考哪些资源才是最适合他们的. 我为每种类型的资源选出了其中最佳的学习资料.如果你是一个真正的初学者,并且有兴趣开始机器学习领域的学习,我希望

Grunt入门教程之(三)

Grunt入门教程之三 Yuidoc插件 Yuidoc 是一个可以将代码注释生成HTML格式文档的工具,文档的生成完全基于JavaDoc风格的代码注释规则. 我们在写公共模块或者API的时候,往往会输出文档给调用者查看,这时候Yuidoc就是一个很好的助手. 下面介绍一下如何在Grunt中使用Yuidoc. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 grunt.initConfig({ pkg: grunt.file.readJSON('package.jso

【转】MYSQL入门学习之十一:触发器的基本操作

转载地址:http://www.2cto.com/database/201212/176781.html 触发器是MySQL响应以下任意语句而自动执行的一条MySQL语句(或位于BEGIN和END语句之间的一组语句):  www.2cto.com DELETE: INSERT: UPDATE: 使用触发器,需要MySQL5或之后的版本支持. 一.触发器基本操作 1.创建触发器 创建触发器时,需要给出4条信息: 唯一的触发器名:(虽然MySQL5允许不同的表上的触发器名称相同,但一般最好不要这么做