佛山网站开发公司:开始使用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 粘贴以下代码。

1
2
3.
4
5
var 杯=要求(“杯”);
 
gulp.task (“默认”,函数(){
  / /这个没有现在,我们将尽快添加功能
});

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

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

复制一个文件

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

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

1
2
3.
4
gulp.task (“复制”,函数(){
  返回 gulp.src (“to_copy.txt”)
    .pipe (gulp.dest (“开发”));
});

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

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

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

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

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

1
2
3.
4
gulp.task (“复制”,函数(){
  返回 gulp.src (“开发/ *”)
    .pipe (gulp.dest (“生产”));
});

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

编译SASS

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

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

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

1
2
3.
4
$主要: # ff9900;
身体{
    背景:主要美元;
}

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

1
2
3.
4
5
gulp.task (“萨斯”,函数 (){
    gulp.src (‘* .scss‘)
        .pipe(萨斯())
        .pipe (gulp.dest (”。/ css '));
});

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

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

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

看文件和文件夹

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

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

1
2
3.
gulp.task (“自动化”,函数(){
    gulp.watch (‘* .scss‘, [“萨斯”]);
});

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

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

运行多个任务

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

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

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

1
2
3.
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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


最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP