正文
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命令,可以利用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
gruntecho Press any key to continue....
pause
根目录文件夹下所有文件
未执行 grunt 时,EngineeringCode现为空文件夹
在执行 grunt 后,完成了将SourceCode文件夹内的文件拷贝到EngineeringCode文件夹内的一系列操作!