grunt学习一
前话(摘自https://www.gruntjs.net/)
- 1.在学习之前了解下为什么需要用构建工具
一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作 - 2.为什么要使用 Grunt,Grunt的作用是什么?
Grunt 生态系统非常庞大,并且一直在增长。由于拥有数量庞大的插件可供选择,因此,你可以利用 Grunt 自动完成任何事,并且花费最少的代价。如果找不到你所需要的插件,那就自己动手创造一个 Grunt 插件,然后将其发布到 npm 上吧。
Grunt的作用,按任务目标大致可分为四类:- 文件操作型:比如合并、压缩js和css文件等(包括)。
- 预编译型:比如编译less、sass、coffeescript等。
- 类库项目构建型:比如 angular、ember、backbone等.
- 工程质量保障型:比如jshint、jasmine、mocha等.
学习历程
- 1.安装nodejs
grunt必须依赖于node.js,基于先学习好grunt的目的,那么首先,我们要安装node.js, https://nodejs.org/zh-cn/download/
- 2.新建一个项目
- 3.安装 CLI
在继续学习前,你需要先将Grunt命令行(CLI)安装到全局环境中。安装时可能需要使用sudo(针对OSX、*nix、BSD等系统中)权限或者作为管理员(对于Windows环境)来执行以下命令。
npm install -g grunt-cli
- 4.一般需要在你的项目中添加两份文件:package.json 和 Gruntfile.js。
package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件,文件名是 Gruntfile.js 或 Gruntfile.coffee。
大部分 grunt-init 模版都会自动创建特定于项目的package.json文件。
npm init命令会创建一个基本的package.json文件,根据命令提示输入一些项目信息,生成文件,文件内容如下。(也可手动创建文件)
{
"name": "grunt-demo",
"version": "10.1.0",
"description": "aaaaaaaaaaa_demo",
"main": "./Gruntfile.js",
"author": "",
"devDependencies": {
"grunt": "^1.1.0",
"grunt-contrib-uglify": "^0.5.1"
}
}
在工程根目录下运行 npm install
等命令成功跑完之后,在工程根目录中生成了node_modules目录,该目录包含一些必要的插件。
接下来我们需要Gruntfile.js配置
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/js/*.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// 加载包含 "uglify" 任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认被执行的任务列表。
grunt.registerTask('default', ['uglify']);
};
接下来我们只需要在工程根目录下,运行命令 grunt
我们可以在根目录看到 动态生成了文件夹 build 如下
@ 以下部分来自摘抄
接下来我们来重点看下Gruntfile.js代码的含义。
所有grunt的代码,必须放在module.exports函数内,参数grunt为grunt对象,当你运行命令grunt时,grunt系统会去读此函数的grunt构建配置。
grunt.initConfig(obj)
initConfig用于配置构建信息,第一个参数必须是个object。
// 构建任务配置
grunt.initConfig({
});
grunt.file.readJSON(path)
读取一个json文件,通常我们会把构建任务的基本配置写在独立的json文件内,方便我们修改。
// 构建任务配置
grunt.initConfig({
//读取package.json的内容,形成个json数据
pkg: grunt.file.readJSON('package.json')
});
grunt.loadNpmTasks(pluginName).
//加载指定插件任务.
grunt.registerTask(taskName,taskArray)
//注册任务,比如下面的代码:
grunt.registerTask('default', ['concat','uglify']);
//注册默认执行的任务,即你运行grunt命令时,触发的任务构建。 第二个参数为任务目标名,在initConfig()中配置
// 配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/js/*.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});