大家好,虽然在博客园注册了很长一段时间,但我还没在博客园写过博客,这是在博客园的第一篇博客,希望能养成每周写博客的好习惯 O(∩∩)O~~) 今天要聊得是gulp的一个实时刷新的插件gulp-livereload,它是一款能够自动刷新网页的插件,能够让你在编写网页的时候,不用再按浏览器的F5进行刷新.既然要聊gulp的插件,就必须要先要学会怎么使用gulp,还没学会使用gulp的同学,可以看那看一点写的gulp教程,建议先看这篇gulp详细入门教程,然后再看其他的.相信你看完之后对gulp会有一…

gulp-ruby-sass是gulp的一个插件,主要是用来实现sass编译,livereload插件主要是实现文件保存时浏览器自动刷新,避免了手动f5的频繁的操作 准备工作:chrome浏览器安装livereload插件,没有安装的可以百度搜索或者FQ下载, 1)首先安装node,全局安装gulp,如果不了解gulp的请先移步到这里. 2)打开命令行切换到工程目录下,安装gulp(cnpm install gulp --save-dev).gulp-ruby-sass(cnpm install…

1.gulp.src(globs[, options]) 1.1.说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用插件: 1.2.globs:  需要处理的源文件匹配符路径.类型(必填):String or StringArray: 通配符路径匹配示例: “src/a.js”:指定具体文件: “*”:匹配所有文件    例:src/*.js(包含src下的所有js文件):…

昨天花了一天的时间,学习了一下gulp,今天整理一下,也分享给朋友们. 首先当然是去gulp的官网逛一圈了: http://gulpjs.com/ 中文站地址: http://www.gulpjs.com.cn/ 里边有入门指南,如下: 1. 全局安装 gulp: $npm install --global gulp 2. 在项目根目录创建package.json文件,可以手动创建,也可以用这行命令自动化完成: $ cd <yourworkspacePath> $ npm init 3. 作为…

(2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月7日,可惜在博客园这边不能修改发布时间.) 放假伊始,老大订购了两台服务器,一台是Dell的R630,用于其他老师的实验室计算用途,另一台则是Gen8,并且一口气把想买的配件全部搞回来了,于是在假期的第一周就摸上了这台非常舒适安静的Gen8啦,本文主要写我们的改装计划以及虚拟化的部署过程,而在后面的计划中,我将虚拟服务器的部署过程交给了小朋友们当做练习,让他们熟悉Linux服务器. 老大有一句话说的特别好,…

安装环境: 我开了个虚拟机xp....用xampp的整合包..下载地址https://www.apachefriends.org/zh_cn/download.html 跟着安装就行了.最后打开xampp控制 配置xampp: 首先在localhost的那个xampp页面的 安全 选项中配置数据库root密码. 然后编辑\xampp\apache\conf中的httpd.conf文件 改为图中所示,即主机ip:80 并且在这个文件中的这个给改了,就是修改根路径 然后我们改访问限制,一般局域网外不…

新建项目 django-admin startproject mysite 运行 python manage.py runserver 创建一个应用 python manage.py startapp APPNAME 迁移数据库 python manage.py migrate 检测数据库变更和生成数据库迁移文件 若是修改了models.py文件,即修改了数据库结构后执行此句会生成一个数据库的配置文件,相当于备份.可用于debug和回滚. python manage.py makemigrati…

前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率.相比于grunt的频繁 IO 操作,gulp的流操作,能更快地更便捷地完成构建工作.此处仅记录初步折腾中所遇点滴以及待解决的点. 文章首链 Gulp折腾之初探 折腾之战略上的藐视 回过头看Gulp的折腾历程,使用还是非常简易的.初步入门资料可参考这里.所以战略上一定要藐…

文/晚晴幽草(简书作者)原文链接:http://www.jianshu.com/p/9768a4dc7cf7著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率.相比于grunt的频繁 IO 操作,gulp的流操作,能更快地更便捷地完成构建工作.此处仅记录初步…

首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下gulp安装流程: 1:全局安装gulp,操作为: npm install gulp -g;2:在根目录下创建 package.json文件,操作为:npm init,之后根据操作输入“名字,版本号,描述”等内容,直接按回车则使用默认值,最后根据提示输入YES即可:输完后根目录下多了个package.json文件:3:本地安装gulp,先进入你的项目所在,如d盘下的…

一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令窗口中直接使用node或npm指令.…

前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后…

前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了.就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择. 什么是gulp 是一个基于 Node.js 流.Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具. Gulp有什么好处 易于学习使用 通过最少的API(核心.src().…

前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/alferov/awesome-gulp StuQ-Gulp实战和原理解析 http://i5…

 gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务. 外网:http://gulpjs.com/ 中文官网:http://www.gulpjs.com.cn/ 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理. 构建快速 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作. 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 易于学习 通过最少的 API,掌握 Gulp 毫不费力,构建工作尽…

项目使用的gulp自动化任务 //定义输出文件夹名称 var distFolderH5 = "distH5"; var distFolderMofang = "distMofang"; //定义根目录路径 var baseUrl = "../"; //定义html目录路径 var tplUrl = "../tpl/"; //定义js目录路径 var jsUrl = "../js/"; //定义css目录路径…

简介: gulp-livereload拯救F5!当监听文件发生变化时,浏览器自动刷新页面.[事实上也不全是完全刷新,例如修改css的时候,不是整个页面刷新,而是将修改的样式植入浏览器,非常方便.]特别是引用外部资源时,刷新整个页面真是费时费力. 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件 1.1.gulp基本使用还未掌握?请参看: gulp详细入门教程 1.2.本示例目录结构如下: 2.本地安装gulp-livereload…

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

简介 Gulp是一个基于流的自动化构建器. 安装 npm config set registry http://registry.npm.taobao.org ---最好用国内源 npm install -g gulp npm install --save-dev gulp 创建文件 gulpfile.js var gulp = require('gulp'); gulp.task('default', function() { // place code for your default ta…

原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpj…

gulp 使用介绍 gulp gulp 插件 gulp的配置文件gulpfile.js gulp 语法 gulp 实例 gulp的缺点 gulp gulp是基于Node.js的前端自动化构建工具,主要用于代码打包.目前主流的前端打包工具,grunt,gulp,webpack.grunt现在似乎慢慢被gulp取代,而我使用gulp也是冲着大家说的配置简单去的,至于通道流,运行文件什么的其实还是次要的:webpack现在很火,听说功能强大,没有用过. npm install gulp -g 注意需要…

有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:“grunt廉颇老矣...”. gulp是基于流的自动化构建工具,有以下几项优点: 易于使用: 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理. 构建快速: 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作. 插件高质: Gulp 严格的插件指南确保插件如你期望的那样简洁…

1.全局安装一遍: $ npm install gulp -g 2.cd 到项目的根目录 (如果跟程序配合,程序先建好程序的话,你可找到放js和css还有images的文件夹.)我当时就在这挡住了,不知道怎么建立文件夹. 我的目录是D:\testDev\gulp $ npm install gulp --save-dev 3.安装插件 $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-c…

2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp的安…

gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp.task(name[,deps],fn); gulp.watch(glob[,opts],tasks) gulp一些常用插件 gulp-rename(重命名) gulp-uglify(JS压缩) gulp-minify-css(css文件压缩) gulp-minify-html(html压缩) gu…

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1.去nodejs官网安装nodejs 2.打开命令行,OSX是终端,windows是命令提示符(window + r 输入cmd回车) 3.使用npm(nodejs的包管理器),或选装cnpm执行npm install cnpm -g --registry=https://registry.npm.taobao.org 4.全局安装gulp:(c)n…

前端自动化工具 -- gulp 使用简介 gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要packa…

nodejs 下载地址:http://pan.baidu.com/s/1bnz2oPp 提取密码:0mip 1.最简单的编译less 在安装好nodejs后,cmd 进入控制台 安装 lessc : npm install lessc -g 在每次修改less文件后,需要手动的去执行 命令编译less文件 : E:\zmapp\webRoot\html\static\css> lessc index.less>index.css  回车,就可以看到less文件已经编译,刷新页面即可. 2.用g…

(1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任务,比如: // 引入 gulp var gulp = require('gulp'); // 引入组件 var jshint = require('gulp-jshint'); var less = require('gulp-less'); var concat = require('gulp-…

gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 g…