Grunt

Grunt介绍

中文主页 : http://www.gruntjs.net/
是一套前端自动化构建工具，一个基于nodeJs的命令行工具
它是一个任务运行器, 配合其丰富强大的插件
常用功能:

合并文件(js/css)
压缩文件(js/css)
语法检查(js)
less/sass预编译处理
其它...

为何要用构建工具？

一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

前端开发工具grunt入门指南-自动化构建一个基于node的命令行工具

为什么要使用 Grunt？

Grunt 生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用 Grunt 自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个 Grunt 插件，然后将其发布到 npm 上吧。先看看入门文档吧。

安装

nodejs

安装nodejs, 查看版本
node -v
创建一个简单的应用grunt_test
|- build----------构建生成的文件所在的文件夹
|- src------------源码文件夹
|- js---------------js源文件夹
|- css--------------css源文件夹
|- index.html-----页面文件
|- Gruntfile.js---grunt配置文件(注意首字母大写)
|- package.json---项目包配置文件
{
"name": "grunt_test",
"version": "1.0.0"
}

安装 CLI

在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令。

全局安装 grunt-cli
npm install -g grunt-cli
上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

grunt安装

安装grunt
npm install grunt --save-dev

构建项目

运行构建项目命令
grunt //提示 Warning: Task "default" not found

配置文件

配置文件: Gruntfile.js

此配置文件本质就是一个node函数类型模块
配置编码包含3步:

初始化插件配置
加载插件任务
注册构建任务

基本编码:
module.exports = function(grunt){
// 1. 初始化插件配置
grunt.initConfig({
//主要编码处
});
// 2. 加载插件任务
// grunt.loadNpmTasks('grunt-contrib-concat');
// 3. 注册构建任务
grunt.registerTask('default', []);
};
命令: grunt //提示成功, 但没有任何效果(还没有使用插件定义任务)

Grunt插件

Grunt插件介绍

grunt官网的插件列表页面 http://www.gruntjs.net/plugins
插件分类:

grunt团队贡献的插件 : 插件名大都以contrib-开头
第三方提供的插件 : 大都不以contrib-开头

常用的插件:

grunt-contrib-clean——清除文件(打包处理生成的)
grunt-contrib-concat——合并多个文件的代码到一个文件中
grunt-contrib-uglify——压缩js文件
grunt-contrib-jshint——javascript语法错误检查；
grunt-contrib-cssmin——压缩/合并css文件
grunt-contrib-htmlmin——压缩html文件
grunt-contrib-imagemin——压缩图片文件(无损)
grunt-contrib-copy——复制文件、文件夹
grunt-contrib-requirejs——合并压缩requirejs管理的所有js模块文件
grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行

合并js

合并js: 使用concat插件

命令:
npm install grunt-contrib-concat --save-dev
编码:

src/js/test1.js
(function () {
function add(num1, num2) {
return num1 + num2;
}
console.log(add(10, 20));
})();
src/js/test2.js
(function () {
var arr = [2,3,4].map(function (item, index) {
return item+1;
});
console.log(arr);
})();

配置: Gruntfile.js

配置: Gruntfile.js

配置任务:
concat: {
options: { //可选项配置
separator: ';' //使用;连接合并
},
build: { //此名称任意
src: ["src/js/*.js"], //合并哪些js文件
dest: "build/js/built.js" //输出的js文件
}
}
加载插件:
grunt.loadNpmTasks('grunt-contrib-concat');
注册任务:
grunt.registerTask('default', ['concat']);
命令:
grunt //会在build下生成一个built.js

uglify压缩js

压缩js: 使用uglify插件

下载
npm install grunt-contrib-uglify --save-dev
配置: Gruntfile.js

配置任务:
pkg : grunt.file.readJSON('package.json'),
uglify : {
options: { //不是必须的
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */'
},
build: {
files: {
'build/js/built-<%=pkg.name%>-<%=pkg.version%>.min.js': ['build/js/built.js']
}
}
}
加载任务:
grunt.loadNpmTasks('grunt-contrib-uglify');
注册任务:
grunt.registerTask('default', ['concat', 'uglify']);
命令:
grunt //会在build下生成一个压缩的js文件

jshint语法检查

js语法检查: 使用jshint插件

命令:
npm install grunt-contrib-jshint --save-dev
编码: .jshintrc
{
"curly": true,
"eqeqeq": true,
"eqnull": true,
"expr" : true,
"immed": true,
"newcap": true,
"noempty": true,
"noarg": true,
"regexp": true,
"browser": true,
"devel": true,
"node": true,
"boss": false,

//不能使用未定义的变量
"undef": true,
//语句后面必须有分号
"asi": false,
//预定义不检查的全局变量
"predef": [ "define", "BMap", "angular", "BMAP_STATUS_SUCCESS"]
}
修改src/js/test1.js
(function () {
function add(num1, num2) {
num1 = num1 + num3
return num1 + num2;
}
console.log(add(10, 20));
})();
配置 : Gruntfile.js

配置任务:
jshint : {
options: {
jshintrc : '.jshintrc' //指定配置文件
},
build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
}
加载任务:
grunt.loadNpmTasks('grunt-contrib-jshint');
注册任务:
grunt.registerTask('default', ['concat', 'uglify', 'jshint']);
命令:
grunt //提示变量未定义和语句后未加分号 -->修改后重新编译

cssmin压缩css

使用cssmin插件

安装:
npm install grunt-contrib-cssmin --save-dev
编码:

test1.css
#box1 {
width: 100px;
height: 100px;
background: red;
}
test2.css
#box2 {
width: 200px;
height: 200px;
background: blue;
}
index.html
<link rel="stylesheet" href="build/css/output.min.css">
<div id="box1"></div>
<div id="box2"></div>

配置 : Gruntfile.js

配置任务:
cssmin:{
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
build: {
files: {
'build/css/output.min.css': ['src/css/*.css']
}
}
}
加载任务:
grunt.loadNpmTasks('grunt-contrib-cssmin');
注册任务:
grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin']);
命令:
grunt //在build/css/下生成output.min.css

watch自动化

使用watch插件（真正实现自动化）

命令: npm install grunt-contrib-watch --save-dev
配置 : Gruntfile.js

配置任务:
watch : {
scripts : {
files : ['src/js/*.js', 'src/css/*.css'],
tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
options : {spawn : false}
}
}
加载任务:
grunt.loadNpmTasks('grunt-contrib-watch');
注册任务:
grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'watch']);
改进：grunt.registerTask('myWatch', ['default','watch']);
命令:
grunt //控制台提示watch已经开始监听, 修改保存后自动编译处理

项目结构

├── src---文章大标题
│   ├── css--- 这里是一个节点
│   ├── js--- 这里是一个节点
├── Gruntfile.js
├── index.html
├── package.json

package.json

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-cssmin": "^2.2.0",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-uglify": "^3.0.1",
    "grunt-contrib-watch": "^1.0.0"
  }
}

index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="build/css/build.min.css">
</head>
<body>
<div id="box1">1111</div>
<div id="box2">2222</div>
<script src="build/js/build.min.js"></script>
</body>
</html>

Gruntfile.js 代码

module.exports = function(grunt) {
    //初始化配置插件任务
    grunt.initConfig({
        concat: {
            options: {
                separator: ';',//连接符 ;
            },
            dist: {
                src: ['src/js/*.js'],//找目标原文件
                dest: 'build/js/build.js',//输出的文件路径及文件名字
            },
        },
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            build: {
                files: {
                    'build/js/build.min.js': ['build/js/build.js']
                }
            }
        },
        jshint : {
            options: {
                jshintrc : '.jshintrc' //指定配置文件
            },
            build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
        },
        cssmin:{
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            build: {
                files: {
                    'build/css/build.min.css': ['src/css/*.css']
                }
            }
        },
        watch : {
            scripts : {
                files : ['src/js/*.js', 'src/css/*.css'],
                tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
                options : {spawn : false}//增量更新---全量更新
            }
        }
    });
    //加载插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    //注册默认任务  grunt执行任务  同步
    grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin']);
    grunt.registerTask('myWatch', ['default', 'watch']);

};

网站首页 > 基础教程正文

前端开发工具grunt入门指南-自动化构建一个基于node的命令行工具

Grunt

Grunt介绍

为何要用构建工具？

为什么要使用 Grunt？

安装

nodejs

安装 CLI

grunt安装

构建项目

配置文件

Grunt插件

合并js

配置: Gruntfile.js

uglify压缩js

jshint语法检查

cssmin压缩css

watch自动化

项目结构

package.json

index.html代码

Gruntfile.js 代码

猜你喜欢

网站首页 > 基础教程 正文

前端开发工具grunt入门指南-自动化构建一个基于node的命令行工具

Grunt

Grunt介绍

为何要用构建工具？

为什么要使用 Grunt？

安装

nodejs

安装 CLI

grunt安装

构建项目

配置文件

Grunt插件

合并js

配置: Gruntfile.js

uglify压缩js

jshint语法检查

cssmin压缩css

watch自动化

项目结构

package.json

index.html代码

Gruntfile.js 代码

猜你喜欢

网站首页 > 基础教程正文