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的信息,但是貌似都失败了 ...我也不知道是为什么... 突然有一天 不知道怎么整的就配置成功了 现在可以分享一下了 正好我用的软件的版本 ...
随机推荐
- 读书笔记:javascript高级技巧(二)
四.惰性载入函数 因为浏览器兼容的原因,我们的javascript代码会有大量的if语句,将执行引导到正确的代码中,看如下函数: function createXHR(){ if (typeof XM ...
- js判断访问来源
通过navigator的userAgent属性来判定 userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值.一般来讲,它是在 navigator.appCode ...
- 匈牙利 算法&模板
匈牙利 算法 一. 算法简介 匈牙利算法是由匈牙利数学家Edmonds于1965年提出.该算法的核心就是寻找增广路径,它是一种用增广路径求二分图最大匹配的算法. 二分图的定义: 设G=(V,E)是一个 ...
- 严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderListener
严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderLis ...
- JavaScript事件对象【转】
一. 事件对象 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. 1.鼠标按钮 非 IE(W3C)中的 button 属性 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的 ...
- 队列 Soldier and Cards
Soldier and Cards 题目: Description Two bored soldiers are playing card war. Their card deck consists ...
- win10添加打印机--无法访问指定设备,路径或文件。。
win10添加打印机无法访问指定设备,路径或文件..后来发现很多按钮点击多说无法访问指定设备,路径或文件.. 解决添加打印机问题: 在搜索栏中搜索:print (从这里添加) 彻底解决: 添加环境变量 ...
- ssh框架开发问题
Struts + spring MVC + hibernate 6.1 从职责上分为表示层.业务逻辑层.数据持久层和域模块层四层. 其中使用Struts作为系统的整体基础架构,负责MVC的分离 ...
- Linux_shell脚本_遍历文件夹下所有文件
参考:lunar1983的专栏 实现:从给定目录树中grep出含制定字符串的行,并给出所在路径 代码如下所示: #!/bin/sh - if [ $# -ne 2 ] then echo " ...
- 字符串—strcpy
来自——百度百科 原型声明:char *strcpy(char* dest, const char *src); 头文件:#include <string.h> 和 #include ...