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

时间: 2024-08-09 23:48:47

Grunt是什么,以及它的一些使用方法的相关文章

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

Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grunt和Gulp都在Visual studio 2015中得到支持.ASP.NET 项目模板默认使用Gulp. Grunt和Gulp Grunt和Gulp有什么区别?Gulp虽然是稍微晚一点登场的,但是它因crisp performance和优雅的语法受到欢迎.与Grunt不同,Grunt往往在硬盘上是

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

Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grunt和Gulp都在Visual studio 2015中得到支持.ASP.NET 项目模板默认使用Gulp. Grunt和Gulp Grunt和Gulp有什么区别?Gulp虽然是稍微晚一点登场的,但是它因crisp pe

Grunt in action

Grunt 是一个自动任务运行器,会安装预先定义的顺序自动运行一系列的的任务,可以简化工作流程,减少重复性的工作从而提高工作交流, 这篇简易教程会从0着手详细介绍grunt. 1.安装 grunt是基于nodejs的,如果你还没有安装,请从http://nodejs.org/下载安装windows版或者Linux版,安装nodejs后,运行如下命令: sudo npm install -g grunt-cli grunt-cli是grunt命令行工具,-g 表示全局安装.安装命令行工具后需要安装

前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件

前端开发环境之GRUNT-JAVASCRIPT任务运行器 前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass. 原方法: ①安装ruby ②编译sass文件(eg:style) sass style.scss style.css ③监控文件/文件夹的变化来自动编译sass文件 sass --watch style.scss:style.css #file sass --watch cssFilePath            

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

(-?-;), 周末过得真是快啊,  很久以前就看到imooc上有个搭建个人电影网站一期 ,二期的视频, 这两周宅家里撸玩没事干, 我也学着搭了一个, 这些东西都是基础, 只要花点时间很好学的, nodeJS这东东就是轻量级, 哪里不爽点哪里. 如果你学着写完可以学到: express新建项目 express自带的jade模板引擎的使用 express的路由管理 express中的权限管理 express如何与mongoose结合, 以及mongoose中的schema和model的使用方法,

WEB前端常用的测试工具

一.QUnit 前端测试工具 QUnit是一个强大的JavaScript单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件.Qunit是Jquery的单元测试框架,并且被广泛使用在各个项目中. 为了使用Qunit,你仅仅需要去包含2个Qunit文件在你的Html页面.Qunit 包含了qunit.js 作为运行器和测试框架,和qunit.css 文件,座位测试套件页面显示测试结果的样式. 二.Selenium 前端测试工具 Selenium 是ThoughtW

elk5.4小白踩坑记录

搭建请参考:http://www.ywnds.com/?p=9776 搭建步骤:http://www.ywnds.com/?p=9776 初步解方案:先不用管这个提示,当你创建完索引后,接受数据后.一般刷新就ok了 出现这个估计是服务正在运行中,你又开启服务就会报错 这个报错是由于在lasticsearch中开启了用户登陆的插件,所以解决这个问题添加上用户即可:如: 启动失败: 2017-09-01 09:22:38,499 main ERROR RollingFileManager (/pat

grunt 入门学习

前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Loading...) JS合并 JS压缩 CSS压缩 CSS Sprite 图片优化 测试 静态资源缓存(版本更新) ... 对应的,一个全副武装的前端可能会是这样的: JSHint CSSLint Jade CoffeeScript RequireJS/SeaJS Compass/Stylus/Le

grunt使用心得

这是我在使用前端构建工具grunt的一些总结,希望对大家有一定的帮助,也希望大家一起讨论一起进步. http://cobish.github.io/%E5%89%8D%E7%AB%AF/2015/06/28/grunt-use.html

Grunt的wiredep任务的配置说明文档

Automatically inject Bower components into the HTML file 自动把Bower的组件注入到HTML文件中 如果我们通过以下方式安装组件 bower install jquery --save bower install sea.js --save 安装后会在bower.json文件中看到 { "name": "framework-demo", "private": true, "dep