AngularJS——grunt神器的安装

最新推荐文章于 2025-09-12 14:39:04 发布

weixin_30379973

最新推荐文章于 2025-09-12 14:39:04 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/zhiyuan-2011/p/4161671.html

本文详细介绍了如何使用Grunt进行前端项目的自动化构建，包括安装、配置及使用方法，适合前端开发者深入学习。

前言：

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

好了闲话少说，刚刚也算是给慕课网店打了广告了，这节主要说的是能帮组我们处理一些额外任务（压缩，合并，编译，单元测试等）的神器 Grunt。

看来官方文档我发现说的是很清楚，下面让我们先捋下如何建立一个 Grunt：

在桌面上新建立一个文件，名称叫 grunt。
在grunt的文件里面建立两个文件

　　　　package.json （会安装制定的版本库）

　　　　例子：

{
  "name": "gruntjs.cn",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

　　　　Gruntfile.js （用于配置或定义任务，加载Grunt插件）

例子

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

  // 任务配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 任务加载
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 自定义任务
  grunt.registerTask('default', ['uglify']);

};