`
xiaoshao
  • 浏览: 52117 次
社区版块
存档分类
最新评论

Grunt 入门 -1

阅读更多
  1. 安装环境
  2. 准备一个新的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中的相关配置,可以在定义任务时使用。
          
  3. 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就算是简单的入门了,至于后面复杂的任务定义,就需要自己钻研了。
0
0
分享到:
评论

相关推荐

    Grunt入门练习Demo

    **Grunt入门练习Demo** Grunt,作为JavaScript的构建工具,是前端开发中不可或缺的一部分。它通过自动化任务来简化重复性工作,如编译、压缩、测试等,从而提高开发效率。本Demo是基于《用grunt搭建自动化的web前端...

    grunt-contrib-jasmine:通过无头Chrome无头运行茉莉花规格

    入门 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-contrib-jasmine --save-dev 插件安装完成后,...

    grunt-jenkins-build-info:Grunt插件,可将Jenkins构建信息(包括源代码控制信息)添加到已定义的json文件(程序包,bower等)中

    入门 这个插件需要 Grunt。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-jenkins-build-info --...

    grunt-filerev-mate:在 grunt-filerev 之后运行的 grunt 插件,它将用 reved 替换 css 文件中的图像 url

    入门 这个插件需要 Grunt ~0.4.1 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-filerev-mate --...

    grunt-merge-json:Grunt Merge JSON(来自 Ralf S. Engelschall 的镜像)

    grunt-merge-json 合并多个 JSON 文件的 Grunt 任务入门这个插件需要 Grunt ~0.4.0 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令...

    grunt-ng-annotate:添加,删除和重建angularjs依赖项注入注释

    入门 该插件需要Grunt。 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-ng-annotate --save-dev ...

    grunt-contrib-internal:管理grunt-contrib项目的内部任务

    入门如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-contrib-internal --save-dev 插件安装完成后,...

    grunt-css-injector:解析 CSS 文件并从 @import 指令注入另一个 css 文件

    入门这个插件需要 Grunt。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-css-injector --save-dev ...

    grunt-service-worker:Grunt sw-precache 包装器

    入门 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-service-worker --save-dev 安装插件后,可以...

    grunt-bbb-server:WIP Grunt BBB服务器

    入门 如果您以前从未使用过 ,请务必查看《指南》。 在与项目的和相同的目录中,使用以下命令安装此插件: npm install grunt-bbb-server --save-dev 完成后,将此行添加到项目的Gruntfile中: grunt . ...

    grunt-contrib-copy:复制文件和文件夹

    入门 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-contrib-copy --save-dev 插件安装完成后,...

    grunt-force-task:为特定任务启用强制选项

    入门该插件需要Grunt。 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-force-task --save-dev 插件...

    grunt-rollup:用于汇总的 Grunt 插件 - 下一代 ES6 模块打包器

    咕噜咕噜 用于Grunt 插件 - 下一代 ES6 模块打包器入门这个插件需要 Grunt &gt;=0.4.0和 node &gt;=8.6.0 。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您...

    grunt-json-merge:Grunt.js插件可合并处理键覆盖的JSON文件

    入门 此插件需要Grunt &gt;=0.4 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-json-merge --save-dev ...

    grunt-component-build:使用 Grunt 构建组件

    如果您以前没有使用过grunt ,请务必查看入门指南,因为它解释了如何创建Gruntfile以及安装和使用 grunt 插件。 熟悉该过程后,请使用以下命令安装此插件: npm install grunt-component-build --save-dev 然后在...

    grunt-html-snapshots:html快照的Grunt任务

    入门 此插件需要Grunt &gt;=1.0.0 要使用较旧的Grunt,请在标签#v1.0.2使用此库 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此...

    grunt-dev-update:使用grunt任务自动更新package.json软件包

    --dev-update 使用grunt任务自动更新您的devDependencies和依赖项入门该插件需要Grunt。 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下...

    grunt-contrib-copy:OSS实践

    入门 这个插件需要 Grunt ~0.4.0 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-contrib-copy --...

    grunt-contrib-htmlmin:缩小HTML

    grunt-contrib-htmlmin v3.1.0 缩小HTML入门如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-contrib-...

    grunt-contrib-nodeunit:运行Nodeunit单元测试

    grunt-contrib-nodeunit v3.0.0 运行Nodeunit单元测试入门如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install ...

Global site tag (gtag.js) - Google Analytics