Grunt是什么,以及它的一些使用方法
♥什么是Grunt
Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。grunt是基于node
更多插件请访问:http://www.gruntjs.net/
使用前提:
1.DOS:powershell
安装(全局)grunt-npm install grunt-cli-g
切换到文件所在目录下安装:npm install grunt
2.安装完成后检查版本
grunt --version
接着咱们要在项目里创建一个Gruntfile.js文件(文件名必须是Gruntfile)
js里写grunt配置代码
module.exports = function (grunt) {
grunt.initConfig({
});
};
插件安装
安装uglify
npm install grunt-contrib-uglify
安装cssmin
npm install grunt-contrib-cssmin
安装完成后咱们来压缩一个css文件
首先要创建一个app文件夹,里面创建一个index.css文件
css文件里写上如下代码:
*{
padding: 0;
margin:0;
}
div{
width: 200px;
height: 200px;
background: pink;
}
之后咱们在Gruntfile.js里写入:
module.exports = function (grunt) {
grunt.initConfig({
cssmin: {
css: {
src:'css/css.css',
dest:'dest/index-min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin']);
};
在命令行运行grunt
Grunt是什么,以及它的一些使用方法的更多相关文章
- Grunt学习笔记【5】---- expand使用方法
本文主要讲expand使用方法. 当你希望处理大量的单个文件时,这里有一些附加的属性可以用来动态的构建一个文件列表.这些属性都可以用于 Compact 和 Files Array 文件映射格式. ex ...
- Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用
Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.cs ...
- 前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件环境下Ruby安装sass常见错误分析
前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ru ...
- ASP.NET5之客户端开发:Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用
Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grun ...
- 使用express4.X + jade + mongoose + underscore搭建个人电影网站
(-。-;), 周末过得真是快啊, 很久以前就看到imooc上有个搭建个人电影网站一期 ,二期的视频, 这两周宅家里撸玩没事干, 我也学着搭了一个, 这些东西都是基础, 只要花点时间很好学的, no ...
- WEB前端常用的测试工具
一.QUnit 前端测试工具 QUnit是一个强大的JavaScript单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件.Qunit是Jquery的单元测试框架, ...
- elk5.4小白踩坑记录
搭建请参考:http://www.ywnds.com/?p=9776 搭建步骤:http://www.ywnds.com/?p=9776 初步解方案:先不用管这个提示,当你创建完索引后,接受数据后.一 ...
- webpack系统配置
简言之,webpack 是一个模块打包器 (module bundler),能够将任何资源如 JavaScript 文件.CSS 文件.图片等打包成一个或少数文件. 为什么要用Webpack? 首先, ...
- React server rendering —— 网易美学主站同构实录
此文已由作者张硕授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 网易美学主站在最初开发时,因为各种历史原因,引入了例如JQuery,Bootstrop,Angular, Re ...
- Gruntjs提高生产力(三)
以下例子来自真实项目,有所删减 grunt-test project 目录结构如下 一我的目的: 1.在src-dev目录中开发最终产出于src目录 2.src-dev中的index目录相当于一个wi ...
随机推荐
- ScrollView嵌套ViewPager,ViewPager内容不显示问题
在ViewPager外面嵌套ScrollView时导致ViewPager 中内容不显示,解决的办法是在ScrollView标签下加入:android:fillViewport="true&q ...
- 交换机的工作模式:IVL和SVL
IVL(independent vlan learning)每个vlan建一个表,看起来好像有很多表,其实这里所说的表是指逻辑上的表,实际上在交换机中还是只有一个表.如果将VID相同的记 录都提取出来 ...
- UVA 725 division【暴力枚举】
[题意]:输入正整数n,用0~9这10个数字不重复组成两个五位数abcde和fghij,使得abcde/fghij的商为n,按顺序输出所有结果.如果没有找到则输出“There are no solut ...
- Centos7下实现多虚拟机互信
假设CentOS 7三台虚拟机A(192.168.111.10).B(192.168.111.11).C(192.168.111.12),需要保证三台虚拟机之间网络的连通性. 操作步骤: 一.在A机上 ...
- 基于WPF系统框架设计(10)-分页控件设计
背景 最近要求项目组成员开发一个通用的分页组件,要求是这个组件简单易用,通用性,兼容现有框架MVVM模式,可是最后给我提交的成果勉强能够用,却欠少灵活性和框架兼容性. 设计的基本思想 传入数据源,总页 ...
- Delphi 异或校验方法
//数据异或校验function BytesXor(buffer:array of byte):Integer;var i:integer;begin Result:=$0; for i:=Low(b ...
- 线程中的WaitForSingleObject和Event的用法
http://chinaxyw.iteye.com/blog/548622 首先介绍CreateEvent是创建windows事件的意思,作用主要用在判断线程退出,程锁定方面. CreateEvent ...
- Android 开发程序员必备网站
开发必备网站: Android 开发各种工具下载 Android 开发国内大牛集合 Android 开发技术博客周刊 Android 开发技术周报中文版 Android 优秀开源项目集合以及源码分析 ...
- Android---63---Android中的动画效果
Android中有四种动画效果: AlphaAnimation:透明度动画效果 ScaleAnimation:缩放动画效果 TranslateAnimation:位移动画效果 RotateAnimat ...
- 在VS2010中如何添加MSCOMM控件,实现串口通讯
参考文章:http://wenku.baidu.com/link?url=MLGQojaxyHnEgngEAXG8oPnISuM9SVaDzNTvg0oTSrrJkMXIR_6MR3cO_Vnh- ...