grunt安装、配置、在webstrom中使用
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中使用的更多相关文章
- Grunt安装配置教程:前端自动化工作流
Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能 ...
- 消息队列RabbitMQ的安装配置与PHP中的使用
一.RabbitMQ安装 windows安装 下载地址: https://github.com/rabbitmq/rabbitmq-server/releases/download/v3.8.3/ra ...
- Alfresco的安装配置(Centos6系统中安装)
Alfresco是一款开源的企业内容管理系统(ECMS),为企业提供了日常的文档管理.协同工作.工作记录管理.知识管理.网络内容管理.图片管理等多种功能. Alfresco是目前应用最广泛的开源企业知 ...
- 64位 windows10,安装配置MYSQL8.0.13
MySQL的安装配置过程,一查网上一大堆,但是每个人在安装配置的过程中都会碰到一些问题,因为安装的版本不一样,有些命令可能就不适用了.所以安装之前一定先确认好你的版本号. 下面开始安装MYSQL8.0 ...
- 如何在webstrom中配置eslint和less
webstrom 帮助文档(英文版) 1.在webstrom中使用ESLint规范代码格式: JSHint 可以帮助检测你的 JavaScript 代码中的错误和潜在的问题,而 eslint是一个 J ...
- Linux系统中ElasticSearch搜索引擎安装配置Head插件
近几篇ElasticSearch系列: 1.阿里云服务器Linux系统安装配置ElasticSearch搜索引擎 2.Linux系统中ElasticSearch搜索引擎安装配置Head插件 3.Ela ...
- webStrom中配置nodejs
1.安装nodejs 下载地址:node.js:https://nodejs.org/download/ 按照提示安装即可 2.安装WebStrom 按照提示安装即可 下载地址:webstorm:ht ...
- Eclipse中安装配置Tomcat
Eclipse(4.4.x及以上)中安装配置Tomcat 以下配置说明全部针对免安装版本 基于tomcat的安装目录和运行目录是可以不同的,本文都会进行说明 首先简单介绍一下tomcat的目录结构,一 ...
- 关于phpstorm中安装配置xdeug
最近从网上找了好多phpstorm中配置安装xdebug的信息,但是貌似都失败了 ...我也不知道是为什么... 突然有一天 不知道怎么整的就配置成功了 现在可以分享一下了 正好我用的软件的版本 ...
随机推荐
- POJ 1141 Brackets Sequence(DP)
题目链接 很早 很早之前就看过的一题,今天终于A了.状态转移,还算好想,输出路径有些麻烦,搞了一个标记数组的,感觉不大对,一直wa,看到别人有写直接输出的..二了,直接输出就过了.. #include ...
- 【BZOJ1001】【BeiJing2006】狼抓兔子 最大流
Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的,而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个 ...
- Let It Be - The Beatles - Lyrics
轉載自 https://www.youtube.com/watch?v=0714IbwC3HA When I find myself in times of trouble, Mother Mary ...
- 纪念逝去的岁月——C++实现一个栈(使用类模板)
这个版本是上个版本的加强版,上个版本的代码:http://www.cnblogs.com/fengbohello/p/4542912.html 目录 1.代码 2.运行结果 1.代码 1.1 调试信息 ...
- 基于 Node.js 平台,快速、开放、极简的 web 开发框架。
资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...
- Linux下rar命令详解
Linux下rar命令详解 用法: rar <命令> -<选项1> ….-<选项N> < 操作文档> <文件…> <@文件列表…> ...
- javascrit2.0完全参考手册(第二版) 第1章第2节:javascript的历史和使用
javascript曾经带给人许多误解,例如如果你不了解它的历史,那么你可能困惑它和java有什么关系,其实它们一点关系都没有.网景公司1995年在Navigator 2.0 中引入这门语言时它叫Li ...
- Tom and paper
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5224 题意: 给出矩形的面积,求出最小的周长. 样例: Sample Input 3 2 7 12 ...
- 使用Privoxy做智能代理切换
使用Privoxy做智能代理切换 You take the blue pill, the story ends, you wake up in your bed, and believe whatev ...
- Java面向对象编程
面向对象的软件开发: 面向对象的开发把软件系统看成各种对象的集合,对象就是最小的子系统,一组相关的对象能够组合成复杂的子系统. 面向对象的开发方法具有以下优点: 1.把软件系统看成是各种对象的集合,更 ...