gulp初涉

1、什么是gulp?

  gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

  gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 前端代码的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

2、什么是流?

  流,流水,把文件比作河流,那么一条河流流出,另一条河流流进,gulp对于文件流的操作就是这样,一个操作的输出结果作为另一个操作的输入,像这样

  这种操作有点类似jQuery的链式操作:$("").html("gg").css({}).parent().find("a").……;在使用流的时候,gulp去除了中间文件,只将最后的输出写入磁盘,整个过程因此变得更快。

3、gulp的安装

  gulp基于node环境,首先确保安装了node

  安装了node,npm[(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)]也自动被装好了

  因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以最好用淘宝提供的cnpm来安装node插件。

  安装cnpm:http://npm.taobao.org/

  安装完后,查看cnpm版本以确保安装成功

  接下来就可以安装gulp了,首先以全局方式安装gulp:cnpm install -g gulp

  然后进入桌面demo/bbs2.0/src下面,进入bash环境,用cnpm install gulp 来将gulp安装到当前目录下

  安装成功后,会出现node_modules文件夹,然后通过cnpm init来创建package.json(node项目配置文件:因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可)

  一路回车下去,会生成package.json文件到当前文件夹,此时尝试去用gulp来启动gulp,会发现会报错

  根据报错信息,我们需要建一个gulpfile.js文件

  然后再运行gulp

  会发现打印出了我们需要的“ok”,到这里gulp基本就可以正常工作了。

4、gulp常用插件使用

  1)压缩合并文件

    新建一个index.html文件

    在js目录下新建两个js文件

    编辑gulpfile文件。如下:

    由于我们用了gulp-uglify,gulp-concat两个插件,所以我们得先安装这两个插件到当前目录

    当安装插件的时候用--save-dev添加到package.json里面后,我们可以查看package.json中是否成功写入了该文件

    OK,有了,那继续安装gulp-concat到目录即可,安装完成后,我们点开node_modules,也会发现成功安装了该插件,现在我们来启动gulp

    OK,没报错,那就说明成功了,接下来查看文件,发现src下面多了我们要压缩合并的all.min.js文件

    2)gulp-sass

     要安装sass,首先得安装ruby,进入sass教程

      点击安装,就会给出怎么样安装sass,以及安装ruby

    ruby安装成功后,查看ruby版本

    成功后通过gem来安装sass

    如果需要用compass(compass和sass关系相当于jQuery和js)的话,顺便把compass装上

    这里需要注意的是gem源的问题,会导致装不上:会报错:SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: ce rtificate verify failed 的错误。可以把gem源换成https://ruby.taobao.org/,如果还是不行,再换成http://gems.ruby-china.org/,再不行就人品问题了

    接下来用compass create来创建sass项目

    创建成功后会自动生成sass,stylesheets,config.rb三个文件

    打开sass里面的任意文件,编辑

    然后编辑gulpfile

    然后将gulp-sass,gulp-compass安装到当前目录

    启动gulp后,查看stylesheets里面对应的文件

    好了,sass已经成功编译成了css

    3)通过gulp-minify-css来压缩css

    启动gulp后

    4)使用gulp-load-plugins来帮我们加载插件

    gulp-load-plugins这个插件能自动帮你加载package.json文件里的gulp插件

    我们只需要在gulpfile里面require('gulp-load-plugins')();

    下面只需要用plugin.**就可以了(多个单词用驼峰命名)

    5)gulp-imagemin和imagemin-pngquant压缩图片

    6)gulp-livereload来自动刷新网页

    首先安装gulp-livereload:cnpm install gulp gulp-livereload,这里以压缩HTML和编译压缩sass为列

    然后再gulpfile里面

    要成功实现无刷新

    1、还需要chrome插件livereload的支持,翻下墙吧

    2、在服务器环境下打开网页,tomcat,wamp,http-server(cnpm install http-server -g)都可以

    然后打开网页

    点击黑圈成我这样,然后修改HTML,或者sass,代码,浏览器就会自动刷新,~~

    上述列子源码:https://github.com/dothin/gulp-test(node_modules文件被我压缩了)

 
 
标签: 架构

什么是gulp?的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  4. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  5. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  6. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  7. 前端自动化构建工具gulp记录

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

  8. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  9. gulp批量打包文件并提取公共文件

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...

  10. 使用gulp解决RequireJS项目前端缓存问题(二)

    1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...

随机推荐

  1. 基于visual Studio2013解决C语言竞赛题之1058打印数字

       题目 解决代码及点评 /************************************************************************/ /* 58 ...

  2. 亚马逊AWS在线系列讲座——基于AWS云平台的高可用应用设计

    设计高可用的应用是架构师的一个重要目标,可是基于云计算平台设计高可用应用与基于传统平台的设计有很多不同.云计算在给架构师带来了很多新的设计挑战的时候,也给带来了很多新的设计理念和可用的服务.怎样在设计 ...

  3. HDU 1030 Delta-wave 数学题解

    给出一个数字塔,然后求沿着数字之间的边走,给出两个数字,问其路径最短的长度是多少. 看似一条搜索题目,只是有一定做题经验的人都知道,这个不是搜索题,直接搜索肯定超时. 这个是依据规律计算的数学题目. ...

  4. shakes hands

    Description On February, 30th n students came in the Center for Training Olympiad Programmers (CTOP) ...

  5. 如何在一个jpg图片上面叠加文字

    1.将jpg转为bmp格式 2.在bmp文件上写上所需文字 3.将写入文字的bmp文件重新转为jpg格式 http://dev.csdn.net/develop/article/22/22948.sh ...

  6. 【状态DP】 HDU 1074 Doing Homework

    原题直通车:HDU  1074  Doing Homework 题意:有n门功课需要完成,每一门功课都有时间期限t.完成需要的时间d,如果完成的时间走出时间限制,就会被减 (d-t)个学分.问:按怎样 ...

  7. Mac与Window之间的共享文件

    Mac访问Window: Finder 菜单 “前往” ,然后“连接服务器”,在服务器地址输入 smb://windows主机名或ip地址/共享名(前提window已设置共享文件) Windows访问 ...

  8. IOS 后台执行 播放音乐

    iOS 4開始引入的multitask.我们能够实现像ipod程序那样在后台播放音频了. 假设音频操作是用苹果官方的AVFoundation.framework实现.像用AvAudioPlayer.A ...

  9. 一起talk C栗子吧(第十二回:C语言实例--单链表一)

    各位看官们,大家好.从今天開始,我们讲大型章回体科技小说 :C栗子.也就是C语言实例.闲话休提, 言归正转. 让我们一起talk C栗子吧! 看官们,上一回中咱们没有说详细的样例,并且是说了样例中的文 ...

  10. mormort 土拨鼠,做后端服务那是杠杠的,基于http.sys

    http.sys你可以用 mormort 土拨鼠,做后端服务那是杠杠的,基于http.sys并且还是开源的,作者天天更新代码,非常勤奋,官方论坛提问,回答也快其实,稍微看看,就能玩的挺好的