`
zhangyaochun
  • 浏览: 2609172 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

grunt系列启动grunt项目

阅读更多

 

    启动grunt project:

 

    1、已经存在的grunt project

 

     假设grunt CLI已经安装了,项目里面已经有package.json和Gruntfile,启动很简单:

 

  • 到项目的根目录
  • 安装项目依赖:
npm install

 

  • 启动grunt
grunt

 

 

    2、一个新的grunt project

 

    增加两个文件到你的项目里面:

 

  • package.json

      你会在这个文件里面列出项目需要的grunt和grunt plugins:

 

{
    "name" : "***",
    "version" : "*.*.*",
    "devDependencies" : {
            "grunt" : "~0.4.0",
            "grunt-contrib-jshint" : "~0.1.1",
            "grunt-contrib-uglify" : "~0.1.2",
            "grunt-contrib-concat" : "~0.1.1"
    }
}

 

     package.json文件放在项目的根目录下,和Gruntfile同级

 

     在根目录下执行:npm install,package.json里面定义的依赖版本会正确的加载!

 

     在你的项目里面有几种方式去创建package.json

 

//大部分的grunt-init templates会自动的创建一个项目特有的package.json文件

//会创建一个基本的package.json文件
npm init 

可以以下面例子开始,如果需要的话可以扩展

{
    "name" : "my-project-name",
    "version" : "0.1.0",
    "devDependencies" : {
         "grunt" : "~0.4.1",
         "grunt-contrib-jshint" : "~0.1.1",
         "grunt-contrib-nodeunit" : "~0.1.2"
    }
}

  

 

  • Gruntfile

     这个文件命名成:Gruntfile.js 或者 Gruntfile.coffee

 

     它是用来配置和定义任务的,同时加载grunt plugins

 

      注释: 在0.3.x version的时候,它叫做:grunt.js

 

 

     一个gruntfile由以下部分组成:

 

  • "wrapper" function
module.exports = function(grunt){
    //在这里面加入相关的任务代码
}

 

 

  • 项目和任务配置
  • 加载grunt plugins和任务
  • 自定义任务

   注:参数grunt 

 

module.exports = function(grunt){
    
      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'
               }
           } 
      });

      //加载支持uglify任务的插件
      grunt.loadNpmTasks('grunt-contrib-uglify');

      //默认的任务
      grunt.registerTask('default',['uglify']);
 
};

 

分享到:
评论

相关推荐

    用Grunt搭建的一个简单的web前端自动化项目

    Grunt是基于JavaScript的构建工具,它允许开发者定义一系列的任务来自动化常见的Web开发工作流程,如编译、压缩、测试、部署等。通过Grunt,我们可以大大提高工作效率,减少手动操作的时间和错误。 **项目配置与...

    grunt-contact 模块

    Grunt是一款基于JavaScript的任务运行器,它可以帮助开发者执行预处理、编译、压缩、测试等一系列构建任务。在这个场景中,`grunt-contact`可能是用于处理特定的文件合并或处理任务,但描述中并未详细说明其具体功能...

    grunt-cli是grunt的客户端,现提供的是基于redhat7.0_x64的客户端

    安装Grunt-CLI后,可以在项目的根目录下运行`grunt`命令,启动Grunt并执行预设的任务。 **基于Redhat 7.0_x64的环境** Grunt-CLI的这个版本是专门为Red Hat Enterprise Linux 7.0的64位版本设计的。Red Hat 7.0是...

    grunt打包配置

    在命令行中输入 `grunt` 命令即可启动 Grunt,执行默认的任务。如果在执行过程中遇到错误,可以参考错误信息来定位问题。常见的错误包括但不限于插件未安装、配置文件错误等。 - **插件未安装**:确保所有需要使用...

    grunt-php, 启动一个PHP服务器.zip

    grunt-php, 启动一个PHP服务器 grunt-php 启动 php服务器几乎是取代了 grunt-contrib-connect的替代品。 例如开发PHP项目或者在它的上运行测试。使用 PHP 5.4.0 中内置的服务器。没有 middleware 选项作

    grunt-wordpress, 用于将内容发布到WordPress的Grunt插件.zip

    grunt-wordpress, 用于将内容发布到WordPress的Grunt插件 grunt使用 WordPress 发布内容到WordPress的Grunt插件。...正在启动Grunt的wordpress就像任何其他的插件插件一样工作。 有关设置Grunt任务的详细信息,

    grunt-ssh, SSH,Grunt的SFTP任务.zip

    grunt-ssh, SSH,Grunt的SFTP任务 新主人 启动 12 -23-2015,我正站在两个巨人( @chuckmo和 @andrewrjones) 作为这个项目维护者的肩膀上) 。 欢迎捐赠,如往常。 ( 这里消息也将在下一次发布时删除) 。静音 ssh

    grunt-msbuild, 用于MSBuild和XBuild的Grunt插件.zip

    grunt-msbuild, 用于MSBuild和XBuild的Grunt插件 grunt-msbuild使用Grunt生成带有MSBuild和XBuild的项目正在启动这个插件需要 Grunt ~0.4.0 。 换句话说,它应该在 0.4.0或者更高版本上工作。If之前,请务必先查看...

    前端开源库-grunt-contrib-testem

    Grunt是一个基于任务的JavaScript项目构建工具,而Testem则是一个实时的前端测试工具,支持多种浏览器,特别适合于TDD(测试驱动开发)和BDD(行为驱动开发)工作流。 Testem的核心功能在于它可以监听源代码的变化...

    grunt-purifycss, 使用grunt构建工具删除未使用的CSS.zip

    grunt-purifycss, 使用grunt构建工具删除未使用的CSS purifycss使用 PurifyCSS 清除不必要的CSS正在启动这个插件需要 Grunt ~0.4.5If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。...

    grunt-bower-task, 面向 Bower的Grunt插件.zip

    grunt-bower-task, 面向 Bower的Grunt插件 grunt-bower-task 安装 Bower 软件包明智地安装。正在启动注意:如果你以前没有使用过 grunt,那么一定要检查一下 guide指南 guide 。 请注意,这里插件仅使用 grunt 的

    Grunt v1.4.1 Elasticsearch Head Files

    在Grunt项目中,`node_modules`会包含所有Grunt插件及其依赖,例如`grunt-elasticsearch-head`及其对Elasticsearch Head源码的引用。安装Grunt插件通常使用npm(Node.js包管理器)进行,命令如下: ```bash npm ...

    前端开源库-grunt-express

    `grunt-express`就是这样一款强大的工具,它利用`grunt.js`框架来启动并监控`express.js` Web服务器,使得开发者能够更加便捷地进行前端应用的构建和调试。`grunt-express`的主要优势在于它能够无缝集成`socket.io`...

    前端js和css的压缩合并之grunt

    - `grunt-contrib-connect`:本地服务器启动插件 - 可以逐个安装这些插件,如`npm install grunt-contrib-cssmin`;也可以一次性安装多个插件,如`npm install --save-dev grunt-contrib-concat grunt-contrib-...

    grunt-build-control, 版本控制生成的代码.zip

    grunt-build-control, 版本控制生成的代码 grunt-build-control 版本控制生成代码并部署它。正在启动这个插件需要 Grunt ~0.4.0 和 Git 。grunt-build-control还支持 AWS弹性 Beanstalk &gt;= v3.5

    grunt-contrib-pug, 编译Pug模板.zip

    grunt-contrib-pug, 编译Pug模板 grunt-contrib-pug-v1.0.0 编译Pug模板正在启动If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。 熟悉该过程后,你可以使用以下命令安装这里插件:npm

    grunt-contrib-copy, 复制文件和文件夹.zip

    grunt-contrib-copy, 复制文件和文件夹 grunt-contrib-copy-v1.0.0 复制文件和文件夹正在启动If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。 熟悉该过程后,你可以使用以下命令安装...

    前端开源库-grunt-cola

    在前端开发中,`Grunt.js` 是一个广泛使用的任务运行器,它允许开发者定义一系列的任务,如编译 SCSS 到 CSS,压缩 JavaScript 文件,或者执行测试等。`grunt-cola` 就是为 `Grunt.js` 带来了更多的定制化功能,特别...

    grunt-manifest, 生成HTML5缓存清单文件.zip

    grunt-manifest, 生成HTML5缓存清单文件 grunt清单 生成HTML5缓存 ...正在启动这个插件需要 Grunt ~0.4.5If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。 熟悉该过程后,你可以使用以下

    grunt+jade

    在实际使用中,你需要解压这些文件,根据项目需求进行配置和调整,然后运行`grunt serve`启动构建服务。 总的来说,"grunt+jade"的组合为前端开发提供了高效的模板编译和自动化构建能力,简化了工作流程,提高了...

Global site tag (gtag.js) - Google Analytics