- 安装环境
-
- 安装node.js, http://nodejs.org/dist/v0.10.36/node-v0.10.36.pkg, 查看nodejs版本`node -v`.
- 安装Node.js包管理器npm: `brew install npm`, 查看npm 版本
- 安装Grunt command line: `npm install -g grunt-cli`
- 准备一个新的Grunt项目
一个Grunt项目主要有两个文件,package.json和Gruntfile。package.json文件中将列出你项目所依赖
的Grunt版本和Grunt插件。Guntfile中定义Grunt任务。
下面我们创建一个简单的Grunt项目。
1)使用`npm init` 创建一个基本的package.json
{
"name": "empty-grunt",
"version": "0.1.0",
"description": "this is a empty grunt project",
"main": "index.js",
"scripts": {
"test": "test"
},
"author": "zengwei shao",
"license": "ISC",
"devDependencies": { //依赖的Grunt插件
"grunt": "^0.4.5"
}
}
2)安装Grunt插件`npm install`,安装之后目录下会生成一个node_modules的文件夹。
3)Gruntfile Gruntfile支持两种格式:Gruntfile.js和Grungfile.coffee。
Gruntfile由以下几部分组成:
》“wrapper”函数
》项目和任务配置
》加载的Grunt插件和任务
》自定义任务
下面我们创建一个简单的Gruntfile
》首先我们安装一下我们将要使用的Grunt插件`grunt-contrib-uglify`
`npm install grunt-contrib-uglify —save-dev`
》创建如下Gruntfile.js
module.exports=function(grunt){
//project configure
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name%> <%= grunt.template.today("yyyy-mm-dd")%>*/\n'
},
build: {
src: 'src/<%= pkg.name%>.js',
dest: 'build/<%= pkg.name%>.min.js'
}
}
});
//loading task plugin
grunt.loadNpmTasks('grunt-contrib-uglify');
//default task
grunt.registerTask('default', ['uglify']);
}
***** “wrapper”函数module.exports=function(grunt){…..},所有Gruntfile都使用这个基本格式(包括Grunt插件),并且所有的Grunt相关定义必须定义在这个Wrapper函数中。
***** grunt.initConfig({})初始化Grunt的配置,grunt.file.readJSON(),可以读出package.json中的相关配置,可以在定义任务时使用。
- Grunt插件和自定义Grunt任务
》》所有在package.json的依赖,通过`npm install`就可以直接安装相关插件。安装完成后,我们就可以通过`grunt.loadNpmTasks(‘plugin name’)`加载和注册插件中的任务。
》》grunt.registerTask('firstSimpleTask', 'This is a simple grunt task', function(){
grunt.log.write("this is a simple grunt task..").ok();
});
这是一个简单的Grunt任务,然后我们运行`grunt firstSimpleTask`就可以在控制台上看到输出结果。
到这里Grunt就算是简单的入门了,至于后面复杂的任务定义,就需要自己钻研了。
相关推荐
**Grunt入门练习Demo** Grunt,作为JavaScript的构建工具,是前端开发中不可或缺的一部分。它通过自动化任务来简化重复性工作,如编译、压缩、测试等,从而提高开发效率。本Demo是基于《用grunt搭建自动化的web前端...
入门 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-contrib-jasmine --save-dev 插件安装完成后,...
入门 这个插件需要 Grunt。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-jenkins-build-info --...
入门 这个插件需要 Grunt ~0.4.1 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-filerev-mate --...
grunt-merge-json 合并多个 JSON 文件的 Grunt 任务入门这个插件需要 Grunt ~0.4.0 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令...
入门 该插件需要Grunt。 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-ng-annotate --save-dev ...
入门如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-contrib-internal --save-dev 插件安装完成后,...
入门这个插件需要 Grunt。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-css-injector --save-dev ...
入门 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-service-worker --save-dev 安装插件后,可以...
入门 如果您以前从未使用过 ,请务必查看《指南》。 在与项目的和相同的目录中,使用以下命令安装此插件: npm install grunt-bbb-server --save-dev 完成后,将此行添加到项目的Gruntfile中: grunt . ...
入门 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-contrib-copy --save-dev 插件安装完成后,...
入门该插件需要Grunt。 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-force-task --save-dev 插件...
咕噜咕噜 用于Grunt 插件 - 下一代 ES6 模块打包器入门这个插件需要 Grunt >=0.4.0和 node >=8.6.0 。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您...
入门 此插件需要Grunt >=0.4 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-json-merge --save-dev ...
如果您以前没有使用过grunt ,请务必查看入门指南,因为它解释了如何创建Gruntfile以及安装和使用 grunt 插件。 熟悉该过程后,请使用以下命令安装此插件: npm install grunt-component-build --save-dev 然后在...
入门 此插件需要Grunt >=1.0.0 要使用较旧的Grunt,请在标签#v1.0.2使用此库 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此...
--dev-update 使用grunt任务自动更新您的devDependencies和依赖项入门该插件需要Grunt。 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下...
入门 这个插件需要 Grunt ~0.4.0 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-contrib-copy --...
grunt-contrib-htmlmin v3.1.0 缩小HTML入门如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-contrib-...
grunt-contrib-nodeunit v3.0.0 运行Nodeunit单元测试入门如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install ...