AngularJs——grunt神器的使用

 前面我们已经知道了如何安装grunt,本章节给各位道友介绍如何使用 grunt 的插件,grunt是重点在于如何配置使用 Gruntfile.js,官网上也有很多范例。

 1,包装函数

module.exports=function(grunt){}

   我们的代码要包括在这个方法里。

 2,任务配置

// 包装函数
module.exports = function(grunt) {

  // 任务配置
  grunt.initConfig({

  })
}

在这里我们需要初始化参数,这是grunt的最主要的部分

 3,导入包文件

// 包装函数
module.exports = function(grunt) {

  // 任务配置
  grunt.initConfig({
     pkg:grunt.file.readJSON(‘package.json‘)
  })
}

  使用 grunt.file.readJSON(‘package.json‘) 可以把外部的package.json文件引入到 gruntfile.js,并生成一个JSON格式的对象可以访问 package.json里的数据,我们如果使用 grunt.file.readYAML() 生成 YAML格式的对象。

4,配置任务

// 任务配置
grunt.initConfig({
  pkg: grunt.file.readJSON(‘package.json‘),
 concat: { // concat 任务的配置 },  uglify: { // uglify 任务的配置 }, 

  my_property: ‘whatever‘, my_src_files: [‘foo/*.js‘, ‘bar/*.js‘]// 其他与任务无关的属性 
 })

  任务配置定义在 Gruntfile 和 grunt.intiConfig()方法中,配置主要是以任务命名的属性,也可以包含其他属性,但是不能与任务所需要的属性重合

5,任务和目标

  当任务运行的时候(下面介绍的加载任务之后),Grunt会从同名的属性中查找配置(即从initConfig)。多重任务可以有多个配置,每个任务使用任意命名的目标定义。

grunt.initConfig({
  concat: {
    foo: {
      // concat 任务的目标 "foo"
    },
    bar: {
      // concat 任务的目标 "bar"
    },
  },
  uglify: {
    bar: {
      // uglify 任务的目标 "bar"
    },
  },
});

  运行 grunt concat:foo 或 grunt concat:bar 只会处理指定的目标配置,而运行 grunt concat都会运行

6,任务加载

  一些任务,比如合并,压缩和校验等都可以作为 grunt插件。只要插件被指定 package.json中,并且通过 npm install 安装好,就可以在 gruntfile中加载:

  

  

时间: 2024-10-10 10:48:26

AngularJs——grunt神器的使用的相关文章

AngularJS——grunt神器的安装

前言: 刚开始学 angularJS,在慕课网上看的大漠老师的视频(http://www.imooc.com/learn/156),里面刚开始讲述了前端开发-调试-测试所使用的手段和工具,本人对前端开发也是一知半解,看来大漠老师的课之后,才发现我以前开发的时候天天被一个项目给拖了很久原来是因为我没有找到好的方法.在此,希望能看到这篇博客的道友们能去看看这视频,特别是对于半路出家的道友,起到的作用是很大的. 好了闲话少说,刚刚也算是给慕课网店打了广告了,这节主要说的是能帮组我们处理一些额外任务(压

发现个很有意思的angularjs +grunt 复习项目

最近作运维工作 docker 接触到一个开源webui dockerui 原项目地址 https://github.com/crosbymichael/dockerui 用angular框架实现,项目结构很简单,纯粹的前端js web项目. 迁移到了本地 (全是人家的代码, 只作了少量修改,学习备用) https://github.com/cclient/study-angu-grunt

Angularjs Nodejs Grunt 一个例子

做了一个简单的示例,目的是记录环境配置以及这套框架的结构流程. 1.配置环境 默认nodejs已安装. 安装以下模块:express(nodejs框架),grunt(javascript task runner),grunt-contrib-watch(grunt live load插件),grunt-express-server(grunt启动express服务端插件). 命令行中进入程序目录,依次输入以下命令: npm install express 回车 npm install grunt

使用Yeoman,Grunt和Bower开发AngularJS(译)

使用Yeoman产生AngularJS的主要骨架 使用Grunt加速开发和帮助执行 使用Bower来加入第三方插件和框架--third party plugins/frameworks 一.准备工作 安装好NodeJS和NPM(读者可自己去google) 二.安装Yeoman, Grunt and Bower,产生AngularJS的主要骨架 2.1 新建一个目录,并进入该目录,执行 npm install -g yo grunt-cli bower 此时Yeoman,grunt和Bower就被

Angularjs Nodejs Grunt 一个样例

做了一个简单的演示样例,目的是记录环境配置以及这套框架的结构流程. 1.配置环境 默认nodejs已安装. 安装下面模块:express(nodejs框架),grunt(javascript task runner),grunt-contrib-watch(grunt live load插件),grunt-express-server(grunt启动express服务端插件). 命令行中进入程序文件夹,依次输入下面命令: npm install express 回车 npm install gr

grunt+requirejs+angularjs 简单运用

两个网址 http://www.gruntjs.org/docs/getting-started.html http://gruntjs.com/plugins 步骤: 1.cd demo文件夹下 2.安装grunt-cli npm install -g grunt-cli    //全局安装 -g 3.手动生产或自动生产 package.json 自动  npm init   //之后按需 输入name和version... 4创建 Gruntfile.js touch  Gruntfile.

[Grunt + AngularJS] Using ng-annotate for min-safe AngularJS

When you minify your code with a tool like Uglify, the resulting minified file will rename variables. This is a problem for AngualrJS, which uses parameter names to provide injected dependencies. You could use the array notation manually, but no huma

前端开发神器WebStorm--自动化工作流Grunt(02)

为何要用构建工具? 一句话:自动化 对于需要反复重复的任务,例如压缩(minification).编译.单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作. 当你正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作. Grunt这货是啥? 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com 为什么使用Grunt? 使 用Grunt的最大好处在于它带给团队的一致性.如果你曾经多人合作完成工作,你就会知道代码中的不一致性是多

ASP.NET 5 and AngularJS Part 1, Configuring Grunt, Uglify, and AngularJS

ASP.NET 5 and AngularJS Part 1, Configuring Grunt, Uglify, and AngularJS This is the first part in a multiple part blog series on building ASP.NET 5 (ASP.NET vNext) apps with AngularJS. In this series of blog posts, I show how you can create a simple