grunt的简单应用

【grunt的简单应用】的更多相关文章

[前端自动化]grunt的简单使用

前言现在前端自动化已经是家常便饭,各种工具也是层出不穷,grunt.gulp.webpack是应用最广的三种工具,虽然grunt看似已垂垂老矣,但是以前写的很多项目一直用的就是grunt,温故方能知新,这里把grunt的基本操作再记录一下. grunt常用插件开始使用grunt很简单,在项目的根目录中添加两份文件:package.json 和 Gruntfile.js.npm安装模块和插件的操作就不细说了,主要是在Gruntfile.js中填写配置代码.代码目录结构如下: 然后我们就来介绍最…

grunt是干什么的呢,一句话:自动化.对于需要反复重复的任务,例如压缩(minification).编译.单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作.当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作.这样就会让我们省很多事. 废话不多说我来做一个简单的压缩js文件的程序,大家多多看看. 首先我们需要先创建一个文件夹来执行我们接下来的步骤,文件夹可以放到自己能找到的任何位置,建完之后我们需要打开命令提示符来执行我们接…

简单使用grunt、bower工具合并压缩js和css

前段时间因为项目中的报表写了一个Jquery插件,开源到github上,参考以往大神们写的插件的姿势,决定搞了像模像样一点.言归正传.前端工程师对这些工具:Node,bower,grunt,npm这些工具应该都很熟悉.今天就简单介绍一下grunt的用法. grunt的介绍及安装请看着:getting-started,中文文档,写的也比较详细. 一个完整grunt项目小包含以下模块或配置文件 npm:node的包管理器,管理(安装)相关插件 grunt-cli:执行grunt任务的工具,但是注意安…

grunt之入门实践

grunt 是基于nodejs的前端项目管理工具,凭借着大量优秀的插件从众多前端项目管理工具中脱颖而出. 确保先安装了nodejs 为了方便使用Grunt,应该在全局范围内安装Grunt的命令行接口(CLI).npm install -g grunt-cli这条命令将会把grunt命令植入到你的系统路径中,这样就允许你从任意目录来运行它(定位到任意目录运行grunt命令). 注意,安装grunt-cli 并不等于安装了grunt任务运行器,需另外安装grunt; npm install…

Nodejs+Grunt配置SASS项目自动编译

Nodejs+Grunt配置SASS项目自动编译早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开始学习SASS,也慢慢的接触这方面的东西.为了能更好的让SASS项目实现自动化编译,打算使用Nodejs和Grunt来试试. SASS的编译的话题,在<SASS编译>有进行过介绍,文中介绍的方法是在Ruby环境下,使用sass命令配合其各种不同的参数来实现SASS的编译.那么今天我们换过一种方式,…

chrome下的Grunt插件断点调试——基于node-inspector

之前调试grunt插件时,都是通过人肉打log来调试.不仅效率低,而且会产生一堆无用的代码.于是简单google了下node断点调试的方法,总结了下. 借助node-inspector,我们可以通过Chrome浏览器的调试工具来调试. 一.安装node-inspector npm install -g node-inspector 二.监听Nodejs的debug调试端口 node-inspector & 见到输出下面log,http://127.0.0.1:8080/debug?port=58…

grunt学习一

grunt是前端自动化工具之一.下面是是grunt的简单小示例: 在使用grunt,确保安装nodejs,如果不清楚,可以百度找相关教程,这个教程已经烂大街了. 1.打开cmd,以管理员的身份.(或者使用编辑器自带的终端或控制器(其实也cmd).这里我使用git shell) 2.安装grunt npm install -g grunt-cli 和安装node_modules: npm init //初始化 npm install //安装node模块 3. 新建项目目录,在src创建一个tes…