经过前面的学习,将测试的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文件夹内的一系列操作!

  

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

  1. Grunt入门学习之(2) -- Gruntfile的编写

    Gruntfile由以下几部分构成: "wrapper" 函数 项目与任务,目标配置 加载grunt插件和任务 自定义任务 1.wrapper函数(包装函数) 每一个 Gruntf ...

  2. Grunt入门学习之(1) -- 环境安装

    Grunt入门学习(1) - 环境安装 这周根据项目需要,在项目的基础上分模块开发了一个小的项目板块,但是在规范组织每个模块的代码和其依赖性时比较麻烦,需要一个项目板块的构建工具.各个模块都包括其对应 ...

  3. grunt 入门学习

    前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Lo ...

  4. cocos2d-x入门学习笔记,主要介绍cocos2d-x的基本结构,并且介绍引擎自带的示例

    cocos2d-x 3.0 制作横版格斗游戏 http://philon.cn/post/cocos2d-x-3.0-zhi-zuo-heng-ban-ge-dou-you-xi http://blo ...

  5. 【原创】SpringBoot & SpringCloud 快速入门学习笔记(完整示例)

    [原创]SpringBoot & SpringCloud 快速入门学习笔记(完整示例) 1月前在系统的学习SpringBoot和SpringCloud,同时整理了快速入门示例,方便能针对每个知 ...

  6. 自动化构建工具grunt的学习

    关于grunt的一些记录,记的比较乱... 0.删除node_modules文件夹 命令行: npm install rimraf -g //先运行 rimraf node_modules //然后运 ...

  7. Retrofit 入门学习

    Retrofit 入门学习官方RetrofitAPI 官方的一个例子 public interface GitHubService { @GET("users/{user}/repos&qu ...

  8. opengl入门学习

    OpenGL入门学习 说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640 ...

  9. Scala入门学习笔记三--数组使用

    前言 本篇主要讲Scala的Array.BufferArray.List,更多教程请参考:Scala教程 本篇知识点概括 若长度固定则使用Array,若长度可能有 变化则使用ArrayBuffer 提 ...

随机推荐

  1. spark中资源调度任务调度

    在spark的资源调度中 1.集群启动worker向master汇报资源情况 2.Client向集群提交app,向master注册一个driver(需要多少core.memery),启动一个drive ...

  2. Universal-Image-Loader完全解析(下)

    Universal-Image-Loader完全解析(下) 在这篇文章中,我会继续跟大家分享有关于Universal-Image-Loader框架的相关知识,这次主要分享的是框架中图片缓存方面的知识. ...

  3. 【编程技术-Shell】AWK使用大全

    1.  AWK中输出特殊字符 输出单引号 涉及到转义字符,但是在使用普通的方法进行转义时,会遇到下面的问题 正确的方法:'\'',使用单引号将转义字符括起来,然后后面加上单引号 输出其他特殊字符 输出 ...

  4. Chrome DevTools的15个使用技巧(译)

    谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须掌握的工具.大多数前端开发者可能熟悉关于chorme的许多特 ...

  5. 使用Java Servlet进行简单登录

    效果图 登录页面代码:login.html <%@ page language="java" contentType="text/html; charset=UTF ...

  6. Hive 安装

    在安装Hive时,一定要在该机器上添加了hadoop服务. 下载并解压文件 tar zxvf apache-hive-3.1.1-bin.tar.gz mv apache-hive-3.1.1 /op ...

  7. -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment avariable and mvn script match.

    eclipse中使用maven插件的时候,运行run as maven build的时候报错 -Dmaven.multiModuleProjectDirectory system propery is ...

  8. CodeIgniter 目录结构详解

    1. myshop 2. |-----system 框架程序目录 3. |-----core 框架的核心程序 4. |-----CodeIgniter.php 引导性文件 5. |-----Commo ...

  9. ComBox、listBox、checklistBox控件

    omBox控件被称为下拉组合框控件,是由System.windows.Forms.ComBox类提供的,主要作用是讲一个集合数据以组合框的形式显示给用户,当用户单击时将以下拉框显示给用户,供用户选择一 ...

  10. js导航下拉菜单

    使用定时器.鼠标移动事件 var img = $('#user_head'); var menu = $('.nav_list'); var i=0; var timer; img.mouseente ...