♥什么是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. 洛谷 P1056 排座椅【贪心/结构体排序】

    题目描述 上课的时候总会有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了一些有趣的现象,当同学们的座次确定下来之后,只有有限的D对同学上课时会交头接耳.同学 ...

  2. Codeforces 891C Envy(MST + 并查集的撤销)

    题目链接  Envy 题意  给出一个连通的无向图和若干询问.每个询问为一个边集.求是否存在某一棵原图的最小生成树包含了这个边集. 考虑$kruskal$的整个过程, 当前面$k$条边已经完成操作的时 ...

  3. SpringBoot第十一篇:SpringBoot+MyBatis+Thymelaf实现CRUD

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/10936304.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   总结前面几 ...

  4. Bystack的高TPS共识算法

    共识算法是分布式系统保证节点数据状态一致性的方法,在区块链的共识算法分POW(工作量证明)和POS(权益证明)两大类.第一类POW模式是在公链项目中运用的最广泛应用的共识算法,比特币长达10年的运行已 ...

  5. 关于js延迟加载(异步操作)的方式

    一.概述 最近重新开始学习js,在第一章的一个小节里写到了“脚本调用策略”,书上写的这部分不多,但是发现在我之前的(笔)面试中,问到的频率还是比较高的.自己一直习惯于直接把所有js文件写在head里, ...

  6. Break Number --AtCoder

    题目描述 Takahashi loves numbers divisible by 2.You are given a positive integer N. Among the integers b ...

  7. POJ 1703 Find them, Catch them 并查集的应用

    题意:城市中有两个帮派,输入中有情报和询问.情报会告知哪两个人是对立帮派中的人.询问会问具体某两个人的关系. 思路:并查集的应用.首先,将每一个情报中的两人加入并查集,在询问时先判断一下两人是否在一个 ...

  8. Theam,style

    Theam <!-- Base application theme. --> <!--<style name="AppTheme" parent=" ...

  9. Hadoop Mapreduce分区、分组、二次排序过程详解

    转载:http://blog.tianya.cn/m/post.jsp?postId=53271442 1.MapReduce中数据流动 (1)最简单的过程:  map - reduce (2)定制了 ...

  10. Drools学习笔记

    Drools是一款基于Java的开源规则引擎 实现了将业务决策从应用程序中分离出来. 优点: 1.简化系统架构,优化应用 2.提高系统的可维护性和维护成本 3.方便系统的整合 4.减少编写“硬代码”业 ...