grunt官网:http://www.gruntjs.org/

一、安装grunt

先安装node,在http://www.nodejs.org/可以下载安装包直接安装。在命令行下运行:

npm install -g grunt-cli

即可安装grunt。

二、创建项目

创建web项目:my-project-name,项目目录如下:

在项目根目录下新建Gruntfile.js和package.json文件。示例如下:

/* package.json */
{
"name": "my-project-name",
"version": "1.0.0",
"description": "this is nodejs demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-jshint": "~0.6.0",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2"
},
"author": "yuki",
"license": "ISC"
}
/* Gruntfile.js */
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
jshint: {
files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
//这里是覆盖JSHint默认配置的选项
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
}
}); grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('test', ['jshint', 'concat']);
grunt.registerTask('default', ['jshint','concat', 'uglify']);
};

三、进入项目目录下,安装grunt,并运行命令:

npm install

安装项目所依赖的包,项目下会生成node_models目录,如下所示:

运行命令:grunt,将执行'default' task。

windows下使用grunt的更多相关文章

  1. windows下使用体验更好的控制台——ConsoleZ

    转做前端开发以来,每天使用最频繁的工具就是控制台了,git提交代码要用,npm安装node包也要用,grunt task 也要用,可是系统自带的cmd太难用了, 那么问题就来了: "wind ...

  2. windows下搭建node.js及npm的工作环境

    近期在研究数据可视化D3框架,决定在windows下搭建一个nodejs及npm的工作环境,在网上查了n篇文章,别管是编译源代码安装也好.还是使用node.msi格式安装包也好,总是有问题.终于,功夫 ...

  3. windows下编译Grafana前端

    本次介绍一下Windows环境源码编译步骤. 准备 安装Go 1.8.1 安装NodeJS LTS 安装Git 安装golang开发环境:  参考链接:https://www.cnblogs.com/ ...

  4. Elasticsearch Windows下安装及配置集群

    首先打开网址:https://www.elastic.co/cn/ 进入如下页面: 下载: 解压: 进入bin文件夹下,运行bat文件: 成功后打开浏览器输入地址: 安装head插件: 首先安装nod ...

  5. chrome下的Grunt插件断点调试——基于node-inspector

    之前调试grunt插件时,都是通过人肉打log来调试.不仅效率低,而且会产生一堆无用的代码.于是简单google了下node断点调试的方法,总结了下. 借助node-inspector,我们可以通过C ...

  6. windows下nodejs express安装及入门网站,视频资料,开源项目介绍

    windows下nodejs express安装及入门网站,视频资料,开源项目介绍,pm2,supervisor,npm,Pomelo,Grunt安装使用注意事项等总结 第一步:下载安装文件下载地址: ...

  7. Windows下ELK-5.4.3环境搭建

    Windows下ELK-5.4.3环境搭建 一.概述 ELK官网 https://www.elastic.co ELK由Elasticsearch.Logstash和Kibana三部分组件组成: El ...

  8. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  9. 让 windows 下的命令行程序 cmd.exe 用起来更顺手

    在 Windows 下使用 Larave 框架做开发,从 Composer 到 artisan 总是避免不了和 cmd.exe 打交道,系统默认的命令行界面却是不怎么好看,且每行显示的字符数是做了限制 ...

随机推荐

  1. SpringBoot的异步调用介绍

    参考博客: https://www.cnblogs.com/jebysun/p/9675345.html https://blog.csdn.net/weixin_38399962/article/d ...

  2. vs移动团队项目集合

    vs移动团队项目集合: https://msdn.microsoft.com/zh-cn/library/vs/alm/dd936138(v=vs.120)/css

  3. Head First HTML与CSS阅读笔记(二)

    上一篇Head First HTML与CSS阅读笔记(一)中总结了<Head First HTML与CSS>前9章的知识点,本篇则会将剩下的10~15章内容进行总结,具体如下所示. div ...

  4. IOS 旋转+缩放(手势识别)

    @interface NJViewController ()<UIGestureRecognizerDelegate> @property (weak, nonatomic) IBOutl ...

  5. Go - 环境安装

    目录 你好,Go语言 环境安装 目录结构 命令 开发工具 学习网址 小结 你好,Go语言 Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. 因工作需要,准备入坑,先从环境安装开始 ...

  6. 2018.5.30 Oracle数据库PLSQL编程---游标的使用

    显示游标的步骤 /* 显示游标处理步骤 1.声明游标 语法结构:cursor 游标名称 is SQL 语句; 2.打开游标 语法结构:open游标名称; 3.提取数据 语法结构:fetch 4.关闭游 ...

  7. solr 近实时搜索

    摘要: Solr的近实时搜索NRT(Near Real Time Searching)意味着文档可以在索引以后马上可以被查询到. Solr不会因为本次提交而阻塞更新操作,不会等待后台合并操作(merg ...

  8. spring-boot自定义启动端口

    有时候我们可能需要启动不止一个SpringBoot,而SpringBoot默认的端口号是8080,所以这时候我们就需要修改SpringBoot的默认端口了.修改SpringBoot的默认端口有两种方式 ...

  9. 谭浩强 c++程序设计第一章课后习题 第10题

    #include <iostream> using namespace std; int main() { int a,b,c; cout<<"请输入三个整数类型的数 ...

  10. 一分钟搭建好webpack通用坏境

    经常忘记一些常用的webpack配置,在这记录一下. webpack能用babel编译es5.能预编译.能加载静态资源(js/css/html).是一个很通用的开发坏境虽然不是很智能但是很好用很方便. ...