一、我对gulp的初期理解

是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并、压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表。

官方解说是:基于流的自动化构建工具。

基于流:应该就是他的语法方式有点像jquery 那样 如: $(".active").css("background":"red").addClass("default");像这样一直点点下去。前一个表达式的输出作为后一个表达式的输入,好像说是叫管道什么的。

自动化:也就是他可以监听你某些文件的变化而做出相应 也就是执行某些任务,比如:你编辑好了一个css文件,保存时,它可以自动的将你这个文件去执行压缩,合并然后另存一份压缩后的文件,还要就是 他可以监听你的文件变化,自动的刷新浏览器页面,也就是比如你设置一个样式,你不用去刷新浏览器,只要保存一下,浏览器就自动跟着刷新了。

这就是目前我对他的了解和尝试。

二、得到gulp

这个首先得知道nodejs,和npm,之前我一直听说nodejs我还以为是个.js文件需要引入的,结果他居然是个环境,就是让js脱离浏览器执行的环境,安装到电脑上后那些基于nodejs的工具之类的才能使用。

而npm呢是个管理器,有点像个下载安装工具,只要你安装好了nodejs那么在控制台用命令npm ** 就算是使用了 如npm install gulp -g这种,全局安装gulp,那么他就会下载安装gulp,就像迅雷之类的,只是他主要是用来管理一些工具包。

具体可以参照 https://blog.csdn.net/momoda111/article/details/76590701 我是从这里开始了解的。

其实这里还牵扯到了commonjs, commonjs其实是中代码模块化开发规范。方法require(“**.js”) module.export等就是他的特点。但是用commonjs规范写的代码浏览器不认,因为浏览器没有require这类方法

所以又牵扯出一个 工具broserify,这个工具是把 按照commonjs规范写的代码,编码一下,变成浏览器可以识别的普通js代码。

gulp的使用主要是依赖各种插件,如压缩css的插件等,要用某个插件需要去下载并在gulpfile.js中引用。

以下是插件学习笔记:

免刷新浏览器实现实时更新页面

无论修改了html,还是css 或者js文件,无需刷新,只要一保存那么页面就更新。

1.首先需要插件 gulp-connect 的支持

var connect = require("gulp-connect");

2.启动一个服务器(放到一个任务中)

gulp.task("server",function(){

  connect.server({

  root:"./app/"     //指定服务器的项目目录 这样服务器启动后就可以直接访问到该目录下的页面

  livereload:true    //是否支持实时刷新页面

  port:8888     //指定一个端口   可以开启多个服务器 只要指定不同的端口即可

  });

});

3.指定需要自动刷新的文件(放到一个任务中)

如:gulp.task("html",function(){

  gulp.src(“.app/css/*.css”).pipe(connect.reload());// 关键在于 connect.reload() 只要在流的最后加上这个就表示刷新页面  即重新加载connect中的项目

});

4.监听需要修改后触发任务的文件

gulp.task("watch",function(){

  gulp.watch(path.app + "**/*.html",['html']);

});

5.做一个一次性启动整个任务的 入口任务。

gulp.task("default",["server","watch"]);

以上的流程解释为:监听  path.app + "**/*.html" 如果其发生变化 则执行任务 ‘html’,而任务html中指定服务器重新载入。

至此 一个简单的 实时更新页面的工具就做好了。

源码:

var gulp = require("gulp");
var connect = require("gulp-connect");
var path = {
app:"./app/"
};
gulp.task("css",function(){
gulp.src(path.app + "css/*.css").pipe(connect.reload());
});
gulp.task("js",function(){
gulp.src(path.app + "js/*.js").pipe(connect.reload());
});
gulp.task("html",function(){
gulp.src(path.app + "**/*.html").pipe(connect.reload());
});
gulp.task("server",function(){ //启动服务器
connect.server({
root:path.app,
livereload:true,
port:8888
});
//使用默认浏览器打开路径下的网页 即打开 root指定的网页
});
gulp.task("watch",function(){
gulp.watch(path.app + "**/*.html",['html']);
gulp.watch(path.app + "**/*.js",['js']);
gulp.watch(path.app + "**/*.css",['css']);
});
gulp.task("default",["server","watch"]);

如果你想任务执行时自动启动浏览器打开页面 在任务server中使用 open("http://localhost:8888"); 这个open也是个插件需要引入。

前端自动化构建工具 gulp 学习笔记 一、的更多相关文章

  1. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  2. 前端自动化构建工具——gulp

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

  3. 前端自动化构建工具 Gulp 使用

    一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...

  4. 前端自动化构建工具--Gulp&&Webpack

    前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...

  5. 前端自动化构建工具——gulp环境搭建教程

    gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...

  6. 前端自动化构建工具-gulp

    gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略, ...

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

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

  8. 前端自动化构建工具gulp使用

    1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev ...

  9. 前端自动化构建工具gulp

    1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次 ...

随机推荐

  1. C# 应用程序单例(禁止多开) 获取.net版本号 以及 管理员权限

    Mutex不仅提供跨线程的服务,还提供跨进程的服务.当在构造函数中为Mutex指定名称时,则会创建一个命名了的Mutex.其他线程创建Mutex时,如果指定的名称相同,则返回同一个互斥体,不论该线程位 ...

  2. winfrom程序Datagridview列名问题

    之前在做程序的时候,有遇到过这个问题: 无法将类型“string”隐式转换为“System.Windows.Forms.DataGridViewTextBoxColume"解决方法 解决办法 ...

  3. centos7搭建时间服务器

    时区概念 GMT.UTC.CST.DST UTC:整个地球分为二十四个时区,每个时区都有自己的本地时间,在国际无线电通信场合,为了统一起见,使用一个统一的时间,称为通用协调时间(UTC:Univers ...

  4. IntelliJ IDEA入门系列

    1.Java Web之Helloworld配置 2.Java Web之Maven搭建Helloworld 3.Java Web之Spring MVC简单管理系统

  5. 单链表ADT

    本博客第一篇学术性博客,所以还是写点什么东西: 首先这篇博客以及以后的博客中的代码尽量百分之90是自己写过的: 可能有部分图片和代码是我认为别人更好的故摘抄下来, 本人三观正确,所以一定会表明来源: ...

  6. python day18 作业 Django 开发主机管理系统

    http://www.cnblogs.com/liang2580/p/9248803.html

  7. ionic 实现仿苹果手机通讯录搜索功能

    前言 由于之前做的SRM移动应用采用的是ionic1.x框架进行开发的,由于性能方便的诟病,导致用户体验不是很友好,于是想着怎么样去提高应用的性能问题.此时刚好ionic3.x框架已发布,由于ioni ...

  8. Excel修改证件照图片背景色

    在实际生活中,我们常常需要把白底证件照更改为蓝底或红底.操作步骤只需4步!   工具/原料   Excel 方法/步骤     第1步:插入白底证件照 单击[插入]---[图片],选择图片保存的位置, ...

  9. 搭建webpack基础配置

    搭建webpack基础步骤: 1.去官方网站下载node.js(根据自己电脑的系统类型选择) 2.安装node.js完成后打开cmd命令提示符: 出现版本号证明安装成功 3.cd到工程目录下 npm ...

  10. ubuntu 下redis的安装简介

    Linux公社:https://www.linuxidc.com/topicnews.aspx?page=2&tid=2 简单介绍下ubuntu下redis的安装方式: 第一种: 1:进入re ...