前言

什么是gulp?gulp有什么用?为什么用gulp?

gulp是前端开发的一种构建工具。

构建工具可以帮助我们工程化地开发项目,比如搭建本地服务器、编译CSS预处理器、保存文件后自动刷新浏览器而不用我们手动去刷新、多个文件合并并压缩、压缩图片等。

gulp在多种构建工具中,算是简单的了,其他构建工具有Grunt、Webpack(何其复杂!)。

所以我们先来个简单的。

使用

首先,使用gulp这种构建工具你必须要会使用npm。

npm是node.js的包管理工具,只要你安装了node.js,就能使用npm了。

所以,我们得先来安装node.js。

官网:https://nodejs.org/zh-cn/

windows系统的选择左边的就行了,其他系统的点击“其他下载”。

下载安装好之后就自然而然地可以使用npm命令了,因为这是node.js自带的。

既然要使用命令,那我们就得去可以敲命令的地方也就是命令行工具。

如果你不知道什么是命令的可以去望一眼linux的内容,学几个命令,也是非常简单的。

windows系统,我们可以使用cmd(开始 - 在搜索框输入“cmd”)打开终端(一个可以敲命令的地方)输入命令。

不过我建议使用vscode(免费的编辑器,可以自行下载)的终端敲命令,这样会非常方便。

其他系统的我不再介绍了,因为你使用其他系统就已经是大佬级了。

打开vscode,点击 查看(v) - 终端(T)

就像上图,你可以看到会出现一个窗口,这个窗口和用cmd打开的窗口是一样的,我们就在这里输入命令。

我们先回到桌面创建一个文件夹“test”  。

用vscode打开这个文件夹(文件(F) - 打开文件夹(F)),就像这样  。

好了,现在我们就处于这个文件夹内了, 。

上面的这些操作完全可以用命令做到,所以学一些命令行的知识还是很有必要的。

我们先输入我们的第一个命令 npm init 来初始化我们的项目,它会出现像下面这样子:

如果你看不懂英文一直回车就行了。

回车完了之后它就生成了一个文件(配置项目信息),接着我们就来安装gulp,输入我们的第二句命令 npm install --save-dev gulp ,

可以看到它在下载并安装了  。

安装完之后出现一个 node_modules 文件夹,里面是node的各种模块,在学习过程中,遇到陌生的东西先不要去深究,按着步骤走下去。

我们之后安装的gulp的各种插件都能在这个文件夹里找到。

现在我们搭好了基本的环境之后,在开始真正使用gulp之前,我们先要确定我们项目的目录结构,如:

文件夹 app 就是我们开发的项目的目录,文件夹 dist 存放的是要放到生产服务器(最终上线给用户用的)上的文件。

现在我们就来写我们的gulp,在根目录下创建一个 gulpfile.js 文件  ,

因为我们已经安装过gulp了,所以

接着我们在终端输入命令 gulp hello ,可以看到我们的输出

(这里如果报错,提示无法使用gulp,那么请全局安装gulp,输入命令 npm install gulp -g)

gulp的所有操作都是基于 gulp.task() ,顾名思义就是创建一个任务,然后去执行它

上面的例子是一个最简单的使用,现在我们模仿项目开发,使用sass,

输入命令 npm install gulp-sass --save-dev 安装 gulp-sass

像上面那样就有看到版本号就说明是安装成功了。

(如果在这里没有能安装成功,有的同学可能会使用淘宝镜像去安装,也就是cnpm,至于什么是淘宝镜像大家可以去百度。

但使用cnpm虽然可以安装成功,但会和使用npm安装的插件产生冲突,这是我自己测试的结果,大家可以自己尝试。

使用npm安装失败,请多尝试几次,我自己在安装过程觉得是跟网络有关。)

安装完之后,引用它

接着我们在文件夹scss下创建一个test.scss文件,用sass的语法编写代码

然后将它编译为.css文件

在终端执行命令 gulp sass

可以看到在文件夹css下生成了一个test.css文件

搭建一个本地服务器,先安装,输入命令 npm install browser-sync --save-dev,安装完成后

在终端输入命令 gulp browserSync,可以看到会弹出一个浏览器窗口。

但现在还不能做到自动刷新浏览器,我们想要达到的效果是,每当我们的文件(html/scss/js)保存修改,浏览器会自动刷新。

所以我们需要用到 gulp.watch,同样,再开启一个任务来完成这件事情,

执行 gulp watch 命令,然后再修改你的文件保存,比如修改test.scss,会发现浏览器已经完成了刷新。

现在,你应该对gulp不陌生了吧,那么现在我们再来做最后一件事,

将多个文件合并成一个文件并输出到文件夹dist,用于生产,

一口气安装这些插件

这里要着重讲一下 gulp-useref 这个插件,编写我们的index.html文件

注意,这里的注释一定不能省略,这个注释让插件知道要合并的文件哪些哪些及输出到哪个位置和合并后的文件名。

然后执行命令 gulp useref,看看你的项目发生了什么变化。

文档:https://gulpjs.com/

参考:https://w3ctrain.com/2015/12/22/gulp-for-beginners/?utm_source=tuicool&utm_medium=referral

Gulp入门及简单使用的更多相关文章

  1. gulp入门演练

    一直想学习下gulp看了蛮多资料,然后总是感觉是是而非,突然开窍了,把自己学会的过程给大家分享下,入门超级简单的 gulp安装 安装gulp 如果参数-g 表示全局安装 $ npm install g ...

  2. gulp:更简单的自动化构建工具

    目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp.为什么使用gulp?因为Gulp更简单.Grunt任务拥有大量的配置,会引用大量你实际上并不需要的对象属性,但是Gulp里 ...

  3. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  4. 【转】Gulp入门基础教程

    Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...

  5. gulp入门学习教程(入门学习记录)

    前言 最近在通过教学视频学习angularjs,其中有gulp的教学部分,对其的介绍为可以对文件进行合并,压缩,格式化,监听,测试,检查等操作时,看到前三种功能我的心理思想是,网上有很多在线压缩,在线 ...

  6. 踢爆IT劣书出版黑幕——由清华大学出版社之《C语言入门很简单》想到的(1)

    1.前言与作者 首先声明,我是由于非常偶然的机会获得<C语言入门很简单>这本书的,绝对不是买的.买这种书实在丢不起那人. 去年这书刚出版时,在CU论坛举行试读推广,我当时随口说了几句(没说 ...

  7. Gulp入门教程(转载)

    本人转载自: Gulp入门教程

  8. [电子书] 《Android编程入门很简单》

    <Android编程入门很简单>是一本与众不同的Android学习读物,是一本化繁为简,把抽象问题具体化,把复杂问题简单化的书.本书避免出现云山雾罩.晦涩难懂的讲解,代之以轻松活泼.由浅入 ...

  9. 《Gulp 入门指南》 : 使用 gulp 压缩 JS

    <Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...

随机推荐

  1. 从内部入手,浅谈malloc和new的区别

    想要理解一样事物,就要先用自己的语言去描述一件事物.在我查阅资料后,发现malloc函数简单说来就是空闲内存空间收集器,并把空闲空间关联起来,用术语来说就是:将空闲内存块合并起来并称为"闲置 ...

  2. Spark RDD 操作

    1. Spark RDD 创建操作 1.1 数据集合   parallelize 可以创建一个能够并行操作的RDD.其函数定义如下: ) scala> sc.defaultParallelism ...

  3. group by 拓展

    Oracle的group by除了基本使用方法以外,还有3种扩展使用方法,各自是rollup.cube.grouping sets.分别介绍例如以下: 1.rollup 对数据库表emp.如果当中两个 ...

  4. <<让你自己的APP成为系统应用>>所遇到的问题及解决方法

    1.adb connect 10.100.1.772.adb -s 10.100.1.77 shell remount3.让你自己的APP成为系统应用 adb push xxx.apk system/ ...

  5. Flink安装部署

    官网:https://ci.apache.org/projects/flink/flink-docs-release-1.7/ops/deployment/cluster_setup.html cd ...

  6. Btrace官方教程-中文版

    教程英文版来源:https://github.com/btraceio/btrace/blob/master/docs/usersguide.html BTrace用户指南 BTrace是一种安全,动 ...

  7. 断断续续Python看到现在

    没有项目的支持 承认自己实践不足 但心怀梦想 我一定可以的

  8. vmware 进入虚拟机VMware的系统后鼠标不能点

    vmware 进入虚拟机VMware的系统后鼠标不能点 1)关闭虚拟机,重启win10,再打开虚拟机好了 2)

  9. oss对象云存储

    import qiniu import uuidimport config def qn_upload_voice(fileData): '''上传语音到七牛云 @arg: fileData - 编码 ...

  10. python之路:数据类型初识

    python开发之路:数据类型初识 数据类型非常重要.不过我这么说吧,他不重要我还讲个屁? 好,既然有人对数据类型不了解,我就讲一讲吧.反正这东西不需要什么python代码. 数据类型我讲的很死板.. ...