您现在的位置是:主页 > 网站建设 > 网站建设

[转译]如何 上海网站排名优化使用Glup

邢台网站优化h-5321Glup(1)Glup安装(1)Glup插件(1)人已围观

简介现代的网络中任何工具都有其使用“寿命”,当它的功能运速不能够满足程序员的要求时势必会有一种新型工具诞生

现代的网络中任何工具都有其使用“寿命”,当它的功能运速不能够满足程序员的要求时势必会有一种新型工具诞生来取代它。那今天邢台网站建设也大家分享的这种新型工具就是Glup。

Glup是一个构建自动化工具。Gulp的code-over-configuration以一种更有效的方法不只让撰写任务更加容易,也更好阅读及维护。而不管是多个应用程序提供工具对于我们的个人项目,Glup可以为我们提供一个自动构建过程。如果我们要使用Git就必须发出以下命令:git clone https://github.com/drewminns/sixrevisions_gulpstarter.git。那如何来使用Glup呢?

Glup的安装。

Glup利用JavaScript应用程序平台称为节点,js为我们提供了一个环境中运行应用程序。节点的特性之一—除了一个强大的工具来开发应用程序,包管理器,节点的缺省包管理器被称为npm。为了使用npm和Glup,需要安装节点。而一旦你安装了节点,就需从命令行可以使用npm安装Glup和任何其他包你需要。

在你的CLI发出以下命令:npm install gulp -g

如果你有困难:使用超级用户特权。如果上面的命令不工作,前缀的命令sudo。这个命令意味着超级做,使管理员(超级用户)访问文件系统。只要你有一个问题执行命令,添加sudo开始的命令:sudo npm install gulp -g 输入上面的命令,你可以要求你的密码。原因是我们正试图安装全球Glup包在我们的系统,如果你开始输入你的密码,你不会看到任何字符输入。

在前进之前,让我们打破每个部分的命令意味着什么。

npm是命令npm的范围内工作。

install是执行的行动的范围内npm。

gulp是我们想要安装的包的名称。

-g是一个命令选项/标记代表了全命令。使用这个命令选项,我们看整个系统。

改变到项目目录

如果一切成功安装,没有错误,继续改变你的工作目录的目录下载示例文件。cd /your/project/directory 这将是我们的项目目录本教程。

对一个项目使用Glup

一旦我们有Glup安装在我们的系统,我们可以进入自动化项目。

创建一个包。json文件运行以下命令:npm init 当您输入命令时,将看到创建一个名为package.json的文件的能力。尽你所能填写字段,最后你会发现一个新创建的包。json在项目文件目录。

package.json是什么?

package.json文件包含关于您的项目的信息。作为我们的项目我们添加更多的包,这些包的文件也将作为一个清单,告诉我们需要哪些文件系统。如果我们将我们的项目转移到另一台计算机或使用另一个开发人员想要使用相同的构建任务package.json文件将作为一个清单。

创建一个gulpfile

使用的引擎gulpfileGlup.js文件。这个JavaScript文件通常引用作为聽gulpfile。gulpfile条款。js和gulpfile在本教程的上下文是同义的。一个gulpfile允许我们在我们的项目中创建任务和自动化。gulpfile的内容,js将因项目而异。

让我们为我们的项目创建一个gulpfile,touch gulpfile.js。

安装Glup插件

即使我们安装Glup在我们的系统,我们也需要将其安装在我们的项目目录。运行以下命令:npm install gulp --save-dev接下来,让我们安装一些Glup插件,允许我们编译Sass CSS文件,然后结合都成一个CSS文件。在命令行中,键入以下:npm install gulp-sass gulp-concat --save-dev

node_modules目录

你会发现一个node_modules目录创建发布后在你的项目目录npm install命令。这个目录包含所有必需的文件运行插件。当我们安装Glup插件和节点包,他们将被放置在node_modules。

设置一个Glup的任务

gulpfile之内。js,我们现在可以设置一饮而尽的任务。gulpfile开放,js在您最喜欢的代码编辑器和让我们的编码。

指定项目的依赖关系,节点的require()函数允许我们指定所需的插件来运行我们的Glup的任务。这些被称为依赖项。我们依靠他们Glup的任务工作。我们不是调用 require()函数每次我们想参考我们的插件,我们不管require()函数返回到JavaScript对象。

var gulp = require('gulp'),
        sass = require('gulp-sass'),
        concat = require('gulp-concat');

所以现在,当我们使用 sass()功能在我们的代码中,我们讨论的gulp-sass插件。当我们使用concat()。我们引用gulp-concat插件。

使用项目的依赖关系,一旦我们告诉喝我们的依赖关系是什么,我们可以设置一个任务。我们将创建一个Glup任务命名styles.

gulp.task('styles', function() {
      return gulp.src('styles/*.scss')
        .pipe(sass({
          'sourcemap=none': true    }))
        .pipe(concat('style.css'))
        .pipe(gulp.dest('styles/'))  });

很赞哦! ()

文章评论

站点信息

  • 建站时间:2018年04月24日
  • 微信公众号:扫描二维码,关注我们
  • 站点地图:xml地图/html地图