文档章节

前端开发利器-grunt

开源中国刘德华
 开源中国刘德华
发布于 2016/06/02 09:48
字数 494
阅读 50
收藏 2

最近看了下angular,顺便就看到了前端自动化构建工具grunt Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Grunt 0.4.x 必须配合Node.js >= 0.8.0 版本使用。

快速开始

  • 安装nodejs
brew install node

如果已经安装了nodejs,请确保当前环境中所安装的 npm 已经是最新版本

sudo npm update -g npm

注:npm是nodejs自带的包管理工具(类似于maven),不需要再另行安装了

  • 安装grunt
sudo npm install -g grunt-cli

注:上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。注意,安装grunt-cli并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。

  • 使用grunt
    • 新建文件夹, 如 grunt
    • 进入文件夹执行
      npm init
      

Paste_Image.png 然后可以在文件夹中看到一个package.json,内容如下:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

注:name不能为grunt, 否则会报错

  • 安装grunt插件
npm install <module> --save-dev

此命令不光安装了<module>,还会自动将其添加到devDependencies配置段中,如下:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
      "grunt-test": "file:grunt"
  }
}
npm install grunt --save-dev  #安装Grunt最新版本到项目目录中,并将其添加到devDependencies内
npm install grunt-contrib-jshint --save-dev  #安装 JSHint 任务模块
  • 新建Gruntfile.js文件,和package.json都位于项目根目录下
module.exports = function(grunt) {
  // Project configuration.
  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']);
};

以上是使用压缩插件压缩和混淆js

  • 运行grunt
grunt  #在根目录下执行

© 著作权归作者所有

共有 人打赏支持
开源中国刘德华
粉丝 23
博文 14
码字总数 6291
作品 0
浦东
程序员
【转】有关 Grunt - 自动化构建工具的奇技淫巧

原文:https://segmentfault.com/a/1190000005029360?utmsource=tuicool&utmmedium=referral 之所以想写有关前端自动化工具的文章出于以下几个原因: 自动化构建工具对于前端开发的重要性:高...

iNiL0119
2016/11/04
16
0
前端工程化之路(一)基于Yeoman:Yo+grunt/gulp+bower 搭建前端工程

转载请加说明:http://my.oschina.net/panpcui/blog/671921 ,谢谢 引言 现今,越来越多的前端集成开发工具涌现,个人觉得特别有必要让前端开发更规范、更系统、更高效。规范:让前端开发的编...

小小实习生
2016/05/09
896
0
前端工程化——构建工具选型

注:文章源于2017年8月的一次内部分享,部分数据可能已经过时。 一、什么是前端工程化 前端工程化是依据业务特点,将前端开发的规范、流程、技术、工具、经验等形成规范并建立成一种标准的体...

Bellhe
01/08
0
0
前端开发--实战篇

如果不了解前端开发环境,请参考搭建前端开发环境 下面以angular为开发框架,实战个前端开发项目。(windows环境为例) 步骤一:初始化项目目录 创建项目根目录文件夹:public 在cmd里面,进...

墨衣夜行
2015/10/12
1K
1
五个值得尝试的前端开发工具

在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提...

oschina
2014/06/08
21.9K
13

没有更多内容

加载失败,请刷新页面

加载更多

Android JNI开发系列(十三) JNI异常处理

JNI 异常处理 JNI异常与JAVA处理异常的区别 JAVA 有异常处理机制,而JNI没有 如果JAVA中异常没有捕获,后面的代码不会执行,JNI会执行 JAVA编译时的异常,是在方法显示的声明了某一个异常,编...

蔡小鹏
32分钟前
1
0
简单介绍Java 的JAR包、EAR包、WAR包区别

WAR包 WAR(Web Archive file)网络应用程序文件,是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。War专用于Web方面。大部分的JAVA WEB工程,都是打成WAR包进行发布的。 War是...

Linux就该这么学
57分钟前
1
0
Qt那些事0.0.7

在帮助文档(Overview - QML and C++ Integration)中随缘遇到一张图,是关于C++对象与QML整合介绍的,值得标记下来,虽然大部分功能也有所涉猎,但是还是留个记号,万一哪天我失忆了还想写Q...

Ev4n
今天
0
0
快速幂运算

题:求一个数 data 的 n 次幂,要求时间复杂度为log(n) 1:递归算法: /** * x^3=(x^2)*x;x^7=(x^3)^2 * x * * 递归算法 * @param data 底数 * @param n 次...

偶尔诗文
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部