1.全局范围安装 Grunt命令行(CLI)

npm install -g grunt-cli

Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许在同一个系统上同时安装多个版本的 Grunt。

2.安装grunt相关模块

在package.json文件中添加所需grunt模块,例如:

"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-uglify": "^0.9.1",
"grunt-contrib-watch": "^0.6.1"

安装这些模块

npm install

执行完这个命令,这些插件会自动安装在node_modules目录下。

若package.json文件不存在,可以自动生成,命令:

npm init

3.配置脚本文件gruntfile.js

模块安装完成之后,在项目根目录下,新建脚本文件Gruntfile.js作为grunt的配置文件

module.exports = function(grunt) {

    // 配置Grunt各种模块的参数
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['scripts/home.js', 'scripts/head.js', 'scripts/foot.js'],
dest: 'dest/libs.js'
}
},
uglify: {
build: {
src: 'dest/libs.js',
dest: 'dest/libs.min.js'
}
}
}); grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
// 默认任务
grunt.registerTask('default', ['concat', 'uglify']); };

以上做法是先合并形成一个libs,然后再将libs压缩成libs.min.js

4.执行grunt命令

grunt concat
grunt uglify

也可以直接执行default:

grunt default

也可以在WebStrom中,右击gruntfile.js文件名,选择Show Grunt Tasks,显示Grunt窗口。default右击选择 Run 'default'。

grunt安装、配置、在webstrom中使用的更多相关文章

  1. Grunt安装配置教程:前端自动化工作流

    Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能 ...

  2. 消息队列RabbitMQ的安装配置与PHP中的使用

    一.RabbitMQ安装 windows安装 下载地址: https://github.com/rabbitmq/rabbitmq-server/releases/download/v3.8.3/ra ...

  3. Alfresco的安装配置(Centos6系统中安装)

    Alfresco是一款开源的企业内容管理系统(ECMS),为企业提供了日常的文档管理.协同工作.工作记录管理.知识管理.网络内容管理.图片管理等多种功能. Alfresco是目前应用最广泛的开源企业知 ...

  4. 64位 windows10,安装配置MYSQL8.0.13

    MySQL的安装配置过程,一查网上一大堆,但是每个人在安装配置的过程中都会碰到一些问题,因为安装的版本不一样,有些命令可能就不适用了.所以安装之前一定先确认好你的版本号. 下面开始安装MYSQL8.0 ...

  5. 如何在webstrom中配置eslint和less

    webstrom 帮助文档(英文版) 1.在webstrom中使用ESLint规范代码格式: JSHint 可以帮助检测你的 JavaScript 代码中的错误和潜在的问题,而 eslint是一个 J ...

  6. Linux系统中ElasticSearch搜索引擎安装配置Head插件

    近几篇ElasticSearch系列: 1.阿里云服务器Linux系统安装配置ElasticSearch搜索引擎 2.Linux系统中ElasticSearch搜索引擎安装配置Head插件 3.Ela ...

  7. webStrom中配置nodejs

    1.安装nodejs 下载地址:node.js:https://nodejs.org/download/ 按照提示安装即可 2.安装WebStrom 按照提示安装即可 下载地址:webstorm:ht ...

  8. Eclipse中安装配置Tomcat

    Eclipse(4.4.x及以上)中安装配置Tomcat 以下配置说明全部针对免安装版本 基于tomcat的安装目录和运行目录是可以不同的,本文都会进行说明 首先简单介绍一下tomcat的目录结构,一 ...

  9. 关于phpstorm中安装配置xdeug

    最近从网上找了好多phpstorm中配置安装xdebug的信息,但是貌似都失败了 ...我也不知道是为什么... 突然有一天 不知道怎么整的就配置成功了 现在可以分享一下了    正好我用的软件的版本 ...

随机推荐

  1. vs2013单元测试第二部分

    上次的随笔说还没弄懂,现在已经弄懂,就让我说说我的方法吧. 1.点击文件——>新建——>项目——>c#——>控制台应用程序,确定,之后如图所示 2.在一定位置写上要进行单元检测 ...

  2. 获取系统开机的时间(Windows、Linux)

    获取系统启动的时间.Windows系统和Linux系统 1.Windows系统 1)代码如下 #include <stdio.h> #include <time.h> #inc ...

  3. [LintCode] Add Binary 二进制数相加

    Given two binary strings, return their sum (also a binary string). Have you met this question in a r ...

  4. JDBC连接池。。。转载

    1. 引言  近年来,随着Internet/Intranet建网技术的飞速发展和在世界范围内的迅速普及,计算机  应用程序已从传统的桌面应用转到Web应用.基于B/S(Browser/Server)架 ...

  5. css3很酷的加载动画多款

    在线实例:http://www.admin10000.com/document/3601.html 源码:https://github.com/tobiasahlin/SpinKit

  6. Window.onload与$(document).ready()的对比

  7. HDU3177 贪心

    Crixalis's Equipment Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  8. hdu Prime Ring Problem

    简单的dfs,貌似这道题用暴力枚举就可以了,毕竟数据开的是比较小的. #include"iostream" #include"algorithm" #inclu ...

  9. 本地数据库(SQL Server)远程连接服务器端服务器

    本地数据库(SQL Server 2012) 连接外网服务器的数据库,外网的服务器端需要做如下配置: 1. 首先是要打开 数据的配置管理工具 2. 配置相关的客户端协议,开启TCP/IP 3. 数据库 ...

  10. IE 9 以下兼容HTML5

    <head> <meta name="viewport" content="width=device-width,initial-scale=1.0&q ...