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. POJ 1141 Brackets Sequence(DP)

    题目链接 很早 很早之前就看过的一题,今天终于A了.状态转移,还算好想,输出路径有些麻烦,搞了一个标记数组的,感觉不大对,一直wa,看到别人有写直接输出的..二了,直接输出就过了.. #include ...

  2. 【BZOJ1001】【BeiJing2006】狼抓兔子 最大流

    Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的,而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个 ...

  3. Let It Be - The Beatles - Lyrics

    轉載自 https://www.youtube.com/watch?v=0714IbwC3HA When I find myself in times of trouble, Mother Mary ...

  4. 纪念逝去的岁月——C++实现一个栈(使用类模板)

    这个版本是上个版本的加强版,上个版本的代码:http://www.cnblogs.com/fengbohello/p/4542912.html 目录 1.代码 2.运行结果 1.代码 1.1 调试信息 ...

  5. 基于 Node.js 平台,快速、开放、极简的 web 开发框架。

    资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...

  6. Linux下rar命令详解

    Linux下rar命令详解 用法: rar <命令> -<选项1> ….-<选项N> < 操作文档> <文件…> <@文件列表…> ...

  7. javascrit2.0完全参考手册(第二版) 第1章第2节:javascript的历史和使用

    javascript曾经带给人许多误解,例如如果你不了解它的历史,那么你可能困惑它和java有什么关系,其实它们一点关系都没有.网景公司1995年在Navigator 2.0 中引入这门语言时它叫Li ...

  8. Tom and paper

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5224 题意: 给出矩形的面积,求出最小的周长. 样例: Sample Input 3 2 7 12   ...

  9. 使用Privoxy做智能代理切换

    使用Privoxy做智能代理切换 You take the blue pill, the story ends, you wake up in your bed, and believe whatev ...

  10. Java面向对象编程

    面向对象的软件开发: 面向对象的开发把软件系统看成各种对象的集合,对象就是最小的子系统,一组相关的对象能够组合成复杂的子系统. 面向对象的开发方法具有以下优点: 1.把软件系统看成是各种对象的集合,更 ...