佛山网站开发公司：开始使用Gulp.js

2019.09.07 佛山网站开发公司

114

杯是一个基于Javascript的工具允许你自动化的工作流。自动化可以节省你的时间。无论你是一名开发人员或设计师创建HTML线框图,我鼓励你去挖。

在本文中,我们佛山网站开发公司来看看使用吞咽的基本知识,从安装到基本语法和几个例子。的文章你应该可以发现,安装和使用包其他人已创建的用于饮而尽编译SASS,优化图片,创建精灵,连接文件,和更多!

推荐阅读: 自动化工作流与繁重

安装杯

别担心,安装非常简单。我们需要在OSX和Linux使用终端,或命令提示符窗口。我将称它为终端从现在开始。

打开和npm - v型和按回车。如果你看到版本号显示你已经安装了节点——这是大口的依赖。

如果您得到一个“命令未找到”(或类似的错误),下到节点。 js下载页面,为您的系统选择适当的包。一旦安装完毕,npm命令将可用的终端。

安装杯是一样简单。下面的命令粘贴到终端,它:

1	npm安装——全球杯

这将安装杯命令在您的系统将在全球范围内。

向项目添加吞咽

杯已经安装,但我们需要将它添加到每个项目我们需要它,分开。现在创建一个空的文件夹并导航到您的终端。在项目的文件夹,使用以下命令:

1	npm安装——save-dev饮而尽

这将创建一个node_modules文件夹和一个npm-debug。日志文件在您的项目文件夹。这些被吞咽用来完成你的项目,你不需要考虑他们在这个阶段。

我们之所以需要添加杯每个特定项目每个项目都有不同的要求。一个可能呼吁SASS,另一个用于更少。一个可能使用Coffeescript,另一个可能不,等等。

的Gulpfile

Gulpfile是奇迹发生的地方,它是你定义的地方你需要的自动化和你想要在什么时候发生。让我们创建一个空的默认任务通过创建一个文件命名 gulpfile.js 粘贴以下代码。

var 杯=要求(“杯”);

gulp.task (“默认”,函数(){

/ /这个没有现在,我们将尽快添加功能

});

一旦保存这个文件你可以回到你的终端和运行吞咽命令。杯检测项目在和运行默认的任务——我们刚刚创建的。您应当会看到类似这样的:

这里发生了什么,因为任务是空的,但它工作正常。现在,让我们开始与一些适当的例子!

复制一个文件

这是一个无聊的,我承认,但它很容易将帮助您了解发生了什么。

佛山网站开发公司在项目文件夹中创建一个文件命名 to_copy.txt 和一个文件夹命名 dev 。让我们进入Gulpfile命名并创建一个新的任务复制。

gulp.task (“复制”,函数(){

返回 gulp.src (“to_copy.txt”)

.pipe (gulp.dest (“开发”));

});

第一行定义了一个名为副本的任务。在此我们用吞咽。 src指定哪些文件我们针对这个任务——在本例中,它是一个文件命名 to_copy.txt 。

然后我们管这些文件gulp.dest函数指定我们想把这些文件,我使用了dev目录。

回到你的终端和类型吞咽副本要运行这个任务,应该指定的文件复制到指定的目录,是这样的:

管道命令吞咽的核心。这是一个有效的方式之间移动数据的命令。管道的src命令指定了文件的命令不在座位上。在更复杂的场景,我们会管我们的文件到其他命令在指定目的地。

你也应该知道源可以作为一个单独的文件,或多个文件。如果我们有一个文件夹命名生产我们想从我们将所有文件发展文件夹,我们可以使用下面的命令:

gulp.task (“复制”,函数(){

返回 gulp.src (“开发/ *”)

.pipe (gulp.dest (“生产”));

});

明星人物将匹配任何目录中。你也可以匹配所有子目录中的所有文件,和各种各样的其他花哨的匹配。看一看 node-glob文档更多信息。

编译SASS

SASS的样式表文件编译为开发人员是一项常见的任务。它可以用杯很容易,我们需要做一些准备。除了基本的命令,如src,桌子和许多其他人,所有功能添加通过第三方插件。这是我如何使用它们。

我输入 SASS吞咽在谷歌,第一个结果通常是我所需要的东西,你应该找到的页面 SASS包。它向您展示了如何安装它(npm安装gulp-sass)。你需要使用sudo以管理员身份安装它,所以它可能会(sudo npm安装gulp-sass)。

一旦完成,您可以使用语法包命令来编译代码。为此,创建一个文件命名样式。 scss以下内容:

$主要: # ff9900;

身体{

背景:主要美元;

}

现在创建以下Gulpfile大口的任务。

gulp.task (“萨斯”,函数 (){

gulp.src (‘* .scss‘)

.pipe(萨斯())

.pipe (gulp.dest (”。/ css '));

});

在运行命令之前,别忘了“需要”包的顶部Gulpfile是这样的:

1	var sass =要求(“gulp-sass”);

当您运行吞咽sass ,所有文件scss扩展将管道sass函数,将它们转换为css。然后输送到目标函数的地方他们的css文件夹。

看文件和文件夹

到目前为止这都是方便的,但我们仍然需要输入一个命令每一次我们想要运行一个任务,这不是非常有效,特别是在样式表的变化。杯让你看文件的变化并自动运行命令。

Gulpfile,创建一个命令命名自动化将使用看命令观看一组文件的变化,并运行一个特定的命令,当文件更改。

gulp.task (“自动化”,函数(){

gulp.watch (‘* .scss‘, [“萨斯”]);

});

如果你输入吞咽自动化到终端,它将开始和完成任务,但它不会回到提示符,因为它是变化的监测。我们已经指定了我们想看所有scss文件的根目录,如果他们改变,我们想运行sass命令我们建立之前。

如果你现在改变你的风格。 scss文件应该被编译自动css中的css文件目录。

运行多个任务

有许多情况下,您可能希望运行多个任务。当看你的javascript文件夹您可能想要编译连接两个文件,然后继续贬低他们。有两种方法可以做到这一点。

如果任务是相关的,我喜欢链。将连接和一个很好的例子缩小的javascript文件。我们第一次管文件concat行动,管他们gulp-uglify,然后使用目标函数来输出。

如果任务是无关的调用多个任务。一个例子将是一个任务,我们要连接和贬低我们的脚本和编译我们的无礼的话。这是他完全Gulpfile看起来如何。

var 杯=要求(“杯”);

var 糟蹋=要求(“gulp-uglify”);

var concat =要求(“gulp-concat”);

var sass =要求(“gulp-sass”);

gulp.task (“脚本”,函数(){

gulp.src (“js / * * / * . js”)

.pipe (concat (“scripts.js”))

.pipe (gulp.dest (“。”))

.pipe(糟蹋())

.pipe (gulp.dest (“。”))

});

gulp.task (“风格”,函数(){

gulp.src (“/ * .scss”)

.pipe(萨斯())

.pipe (gulp.dest (”。/ css '));

});

gulp.task (“自动化”,函数(){

gulp.watch ([‘* .scss‘,“js / * * / * . js”]、[“脚本”,“风格”]);

});

gulp.task (“默认”, [“脚本”,“风格”]);

如果你输入大口的脚本到终端,js目录内的所有javascript文件将连接,输出到主目录,然后糟蹋,保存到主目录。

如果你输入吞咽sass ,所有scss文件将被编译和保存到css目录。

如果你输入狼吞虎咽地吃 (默认任务),你的脚本任务将运行,紧随其后的是你风格的任务。

的吞咽自动化任务表多个文件夹的变化我们scss和js文件并将执行两个任务我们定义,如果检测到变化。

概述

使用杯并不困难,事实上,许多人喜欢它咕哝着说由于其简单的语法。记得时要进行的步骤创建一个新的自动化:

搜索插件
安装插件
需要在你Gulpfile插件
使用文档中的语法

五个命令可在杯(任务、运行看,src, dest)是唯一你需要知道,所有第三方插件有很大的文档。下面列出的一些东西我用你现在可以开始使用:

优化的图像 gulp-image-optimization
创建图片精灵与 gulp-sprite
连接文件 gulp-concat
缩减文件 gulp-uglify
删除文件 gulp-del
Javascript产品毛羽与 gulp-jslint
JSON产品毛羽与 gulp-jsonlint
Autoprefix CSS与 gulp-autoprefixer
搜索和替换使用 gulp-frep
CSS和贬低 gulp-minify-css