♥什么是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是什么,以及它的一些使用方法的更多相关文章

  1. Grunt学习笔记【5】---- expand使用方法

    本文主要讲expand使用方法. 当你希望处理大量的单个文件时,这里有一些附加的属性可以用来动态的构建一个文件列表.这些属性都可以用于 Compact 和 Files Array 文件映射格式. ex ...

  2. Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

    Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.cs ...

  3. 前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件环境下Ruby安装sass常见错误分析

    前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ru ...

  4. ASP.NET5之客户端开发:Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

    Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grun ...

  5. 使用express4.X + jade + mongoose + underscore搭建个人电影网站

    (-。-;), 周末过得真是快啊,  很久以前就看到imooc上有个搭建个人电影网站一期 ,二期的视频, 这两周宅家里撸玩没事干, 我也学着搭了一个, 这些东西都是基础, 只要花点时间很好学的, no ...

  6. WEB前端常用的测试工具

    一.QUnit 前端测试工具 QUnit是一个强大的JavaScript单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件.Qunit是Jquery的单元测试框架, ...

  7. elk5.4小白踩坑记录

    搭建请参考:http://www.ywnds.com/?p=9776 搭建步骤:http://www.ywnds.com/?p=9776 初步解方案:先不用管这个提示,当你创建完索引后,接受数据后.一 ...

  8. webpack系统配置

    简言之,webpack 是一个模块打包器 (module bundler),能够将任何资源如 JavaScript 文件.CSS 文件.图片等打包成一个或少数文件. 为什么要用Webpack? 首先, ...

  9. React server rendering —— 网易美学主站同构实录

    此文已由作者张硕授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 网易美学主站在最初开发时,因为各种历史原因,引入了例如JQuery,Bootstrop,Angular, Re ...

  10. Gruntjs提高生产力(三)

    以下例子来自真实项目,有所删减 grunt-test project 目录结构如下 一我的目的: 1.在src-dev目录中开发最终产出于src目录 2.src-dev中的index目录相当于一个wi ...

随机推荐

  1. 洛谷——P1962 斐波那契数列

    P1962 斐波那契数列 题目背景 大家都知道,斐波那契数列是满足如下性质的一个数列: • f(1) = 1 • f(2) = 1 • f(n) = f(n-1) + f(n-2) (n ≥ 2 且 ...

  2. golang实现dns域名解析(二)

    上一节已经讲了如何构造dns请求包的情况,这一节接着上一节的情况,谈谈dns查询报文中的问题部分.问题部分中每个问题的格式如下: 查询名是要查找的名字,它是一个或者多个标识符的序列.每个标识符以首字母 ...

  3. UICollectionView专题

    什么是UICollectionView UICollectionView是一种新的数据展示方式,简单来说可以把他理解成多列的UITableView(请一定注意这是UICollectionView的最最 ...

  4. IOS7开发~UIKit Dynamics

    UIKit Dynamics的中文名称:有叫UIKit动力,也有叫UIKit动力模型和UIKit动态或者动态UI,叫什么名不要紧,理解就含义就可以了. 什么是UIKit Dynamics ? UIKi ...

  5. Copy Records From One Data Block To Another Data Block In Oracle Forms

    In this tutorial you will learn to copy the records from one data block to another data block on sam ...

  6. 【spring boot】application.properties官方完整文档【参考使用】

    官方地址: https://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/ 进入搜索: Appendice ...

  7. 模拟登陆web微信的流程和参数细节

    这几天在用python写了一个模拟登陆web微信,发送和接受信息的程序.发现步骤不多,但需要的参数太多了 整个过程中,务必保证session.headers.cookie一致,不然的话,中间会出现登陆 ...

  8. opengl interface

    glTranslate()是移动坐标系,比如glTranslate(-1.5,0,0),之后你画的图就是在屏幕左边1.5个单位~glRotation()是做旋转的,第一个参量是angle,后面3个分别 ...

  9. 2015年度新增开源软件排名TOP100

    2015年度新增开源软件排名TOP100 本榜单包含2015年开源中国新收录的软件中,根据软件本身的关注度.活跃程度进行排名前100名的软件.从这份榜单中或许可以了解到最新业界的趋势. 1.Switc ...

  10. NSIS隐藏窗体标题栏自带的button(最大化,最小化,关闭X)

    这个问题实在八月份逛csdn论坛的时候偶然遇到的,当时比較好奇楼主为啥要隐藏关闭button.就顺口问了下,结果楼主已经弃楼.未给出原因,猜着可能是为了做自己定义页面美化,无法改变按纽外观之类的,后来 ...