如果你还不了解grunt,或者只是听过它的名字而没有去研究过它,那么这篇入门级的文章就是为你写的,相信看完你就会爱上grunt! grunt是什么? grunt是一个非常好的自动化工具,你只管codeing,它会自动帮你将代码合并(concat).压缩(uglify).语法检查(jshint).自动编译less(contrib-less)和sass(contrib-sass).压缩图片(contrib-imagemin).读写拷贝移动文件等等,极大地简化了你的工作,它有很多插件,前面说到的每个功…

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

轻松入门vue系列 Vue前端路由 七.Vue前端路由 1. 路由的基本概念与原理 后端路由 前端路由 实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用 基本使用步骤 路由重定向 3. vue-router嵌套路由 嵌套路由功能分析 实例demo 4. vue-router动态路由匹配 通过动态路由参数的模式进行路由匹配 路由组件传递参数 5. vue-router命名路由 6. vue-router编程式导航 七.Vue前端路由 1. 路由的基本概念与原理…

现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率.   为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化…

简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在实现上…

gulp是前端开发过程中经常要用到的工具,非常值得花时间去掌握.利用gulp,我们可以使产品流程脚本化,节约大量的时间,有条不紊地进行业务开发.本文简单讲一下入门gulp需要掌握的东西. 安装gulp 首先,我们需要在全局安装gulp. npm install -g gulp 然后,我们切到项目根目录,在项目中也进行gulp的安装,表明项目对gulp的依赖. npm install --save-dev gulp 接着,我们在项目根目录里新建一个gulpfile.js文件,这个是gulp的配置文…

项目目录,js源文件 gruntest Gruntfile.js package.json -- js ext community_plugin.js glogin_frm_cover.js iLogin.js kkpv.js lnk_plugin.js md5.js storyleak_plugin.js tabSwitch.js -- 5.2 js download_main.js mp4 js kankan_commercial_mp4.js kankan_page_mp4.js kkc.…

最近在学习Bootstrap,了解一部分之后,发现Bootstrap使用了LESS,好嘛,开始学习LESS,LESS了解部分,发现自动编译工具Grunt,了解Grunt过程发现需要使用node.js的npm工具和语法......得,打住吧,先安装node吧,之后再了解.由于本屌丝使用的是win7系统,所以以下教程均在win7下测试. 1.准备工作:安装node.js:http://www.w3cschool.cc/nodejs/nodejs-install-setup.html 新版nodejs…

上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天我继续介绍前端开发的另一工具——grunt.关于介绍grunt文章网上已经存在很多,而本文主要结合自己的亲身实践来讲解利用grunt实现前端开发中代码的压缩及合并. 一.准备工作 再使用grunt之前,我们先要安装node.js,利用node的包管理工具npm来安装grunt node.js下载地址…

什么是自动化 先来说说为什么要自动化.凡是要考虑到自动化时,你所做的工作必然是存在很多重复乏味的劳作,很有必要通过程序来完成这些任务.这样一来就可以解放生产力,将更多的精力和时间投入到更多有意义的事情上.随着前端开发不再是简单的作坊式作业,而成为一个复杂的工程时,还涉及到性能优化一系列工作等等,这时自动化已然是迫切的需求. 早期的网站开发 在还没有前端工程师这种分工如此明确的岗位时,大家所理解的前端工作无非就是制作网页的人,包括html.css.js等.稍微高级点的可能就是php了,可以读写数据…