文档章节

前端开发利器-grunt

开源中国刘德华
 开源中国刘德华
发布于 2016/06/02 09:48
字数 494
阅读 49
收藏 2
点赞 1
评论 0

最近看了下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
ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bowe

基于Visual Studio 2015,你可以: 方便的管理前端包,如jQuery, Bootstrap, 或Angular。 自动运行任务,如LESS、JavaScript压缩、JSLint、JavaScript单元测试等。 方便的获得Web开发者生态圈...

葡萄城控件技术团队
2015/01/27
0
2
用grunt搭建自动化的web前端开发环境-完整教程

转载自: http://developer.51cto.com/art/201506/479127.htm 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt,那你就真的真的真的out了(三个“真...

ahl123
2017/06/08
0
0
Spatra/TeamMindmap

项目说明 简介 将思维导图运用到团队协作中, 并提供在线的思维导图绘制功能. 相关技术点 项目后端采用Laravel 4.2构建 前端使用Twitter Bootstrap作为UI基本构件,AngularJS被应用于编写Web...

Spatra
2015/01/28
0
0
Yeoman:Web 应用开发流程与工具

随着 Web 2.0 和 HTML 5 的流行,现在的 Web 应用所能提供的功能和交互能力比之前传统的 Web 应用要强大很多。应用的很多实现逻辑被转移到了浏览器端来实现。浏览器不再只提供单一的数据接收...

oschina
2014/03/08
2.8K
4
轻量级移动组件库--LEGO-Mobile

LEGO-Mobile 是 LEGO 移动前端开发框架,提供简单、快速的 Web 开发体验。Lego Mobile 是基于 zepto 和 seajs 的轻量级移动组件库,提供了一系列webapp的UI解决方案。支持 UC,QQ,Opera,S...

叶秀兰
2014/08/25
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vue-router懒加载

1. vue-router懒加载定义 当路由被访问的时候才加载对应组件 2. vue-router懒加载作用 当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率。 ###3. vue-router懒加载实...

不负好时光
10分钟前
0
0
庆祝法国队夺冠:用Python放一场烟花秀

天天敲代码的朋友,有没有想过代码也可以变得很酷炫又浪漫?今天就教大家用Python模拟出绽放的烟花庆祝昨晚法国队夺冠,工作之余也可以随时让程序为自己放一场烟花秀。 这个有趣的小项目并不...

猫咪编程
12分钟前
0
0
SpringBoot | 第七章:过滤器、监听器、拦截器

前言 在实际开发过程中,经常会碰见一些比如系统启动初始化信息、统计在线人数、在线用户数、过滤敏高词汇、访问权限控制(URL级别)等业务需求。这些对于业务来说一般上是无关的,业务方是无需...

oKong
26分钟前
4
0
存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储

存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储 存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储。 顺序结构和链接结构适用在内存结构中。 顺序表每个单元都是按物理...

DannyCoder
36分钟前
1
0
Firefox 61已经为Ubuntu 提供支持

最新和最好的Mozilla Firefox 61 “Quantum”网络浏览器已经为Ubuntu Linux操作系统的用户提供了支持,现在可以通过官方软件库进行更新。 Mozilla于2018年6月26日发布了Firefox 61版本,该版...

六库科技
今天
0
0
Win10升级后执行系统封装(Sysprep)报错

开始封装 一年多以前开始给公司封装Win10系统,便于统一给公司电脑初始化携带各种软件的系统,致力于装完既可以开发的状态。那时候最新的版本是Win10 1703版本,自然就以他为母盘,然后结合V...

lyunweb
今天
40
0
php 性能优化

#什么情况下会遇到性能问题 PHP 语法使用的不恰当

to_be_better
今天
0
0
Jenkins 构建触发器操作详解

前言 跑自动化用例每次用手工点击jenkins出发自动化用例太麻烦了,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行。 一、定时构建语法 * * * * * (五颗星,中间用空格隔...

覃光林
今天
0
0
IDEA配置技巧

超详细设置Idea类注释模板和方法注释模板 idea去掉注解param下划线 JetBrains全系列破解

AK灬
今天
0
0
rsync通过服务同步/Linux系统日志/screen工具

rsync通过服务同步 分为服务端(机器A) 和客户端(机器B) 机器A操作编辑/etc/rsyncd.conf配置文件 [root@yolks1 ~]# vim /etc/rsyncd.conf 文件中添加以下配置 port=873 ...

Hi_Yolks
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部