
Gulp的定义:Gulp Autoprefixer
我们知道,Gulp是用来管理开发人员的前端任务的,这意味着它可以自动完成不同的任务。自动前缀器帮助我们管理CSS代码;另一方面,在线自动前缀器提供网站的前缀CSS代码。通过使用自动前缀器,我们可以结合与CSS相关的不同查询,我们也可以创建不同的冲刺图像,按照我们的要求美化CSS和JavaScript文件,按照我们的要求最小化HTML文件的大小,以及更多我们可以随时做的事情。
什么是Gulp Autoprefixer?
利用Autoprefixer,你可以在编写CSS代码时避免一些重复的无意义的工作。这个功能可以帮助我们忘记如何使CSS代码跨程序,只需编写标准的代码,然后,设备就可以直接在我们的代码中添加商家前缀。
在我们编写CSS代码的时候,我们不知道如何让它们跨越所有的程序,所以你查询谷歌,浏览Stackoverflow来让它们工作,这是需要一些投资。
假设你还在利用先进的时代目的地,如WordPress,和Joomla,尽量不要有先进的表格设备,如Webpack,Gulp,或Grunt,你可以利用在线CSS AutoPrefixer设备,它对我们来说是无可挑剔的。
PostCSS模块可以解析CSS并为CSS规则添加卖方前缀。它是一个CSS后处理程序。它通过合并的CSS记录进行筛选,在真正看完代码后,添加或消除商家前缀,如-WebKit和-Moz。
流媒体形式的框架,它构建框架计算机化的任务:最小化和复制所有的JavaScript文件,和静态图片。更适合于观察记录,当文件发生变化时,自然地重新运行任务。
Gulp自动修正器的安装
现在让我们来看看如何安装自动修正器,如下。
首先,我们需要在以下命令的帮助下确认Node js的安装。
node -v
解释
通过上面的命令,我们可以看到Node.js的安装版本,执行后我们可以在下面的命令中看到结果,如下所示。

在命令行提示符下,输入相应的命令,以显示npm(Node.js bundle chief)的变体,它是用来引入模块的。它将在以下命令的帮助下显示引入的Node.js形式。
npm -v
解释
执行上述命令后,我们可以看到当前安装在我们机器上的npm的版本,如下面的截图所示。

现在我们成功地安装了Node.js,现在我们需要用下面的命令来安装gulp。
npm install gulp -g
解释
在上面的命令中,我们用g作为标志,确保gulp对所有项目都是全局可用的。在输入上述命令后,我们得到如下屏幕,如下面的截图所示。

为了验证gulp,我们需要运行下面的命令,如下所示。
gulp -v
解释
执行上述命令后,我们会得到当前安装的gulp的版本,如下图所示。

之后,我们可以在以下命令的帮助下安装autoprefixer,如下所示。
npm install -save-dev gulp-autoprefixer
在成功安装自动补码器后,我们需要在项目目录内创建gulpfile.js,并写下以下代码。
var gulp = require('gulp');
gulp.task('event', function(){
console.log('\n Hello Welcome !\n')。
});
这里我们有了代码,现在我们需要执行上面的代码,或者我们可以说是借助于以下命令的文件,如下所示。
gulp事件
解释
执行上述命令后,我们可以在命令行上看到如下截图所示的结果。

你可以在Gulp网站上观察Gulp模块的代码。对于我的情况,我使用Gulp来最小化我的JavaScript文档,合并CSS媒体问题,或者让我的CSS记录自然地拥有商家前缀。
Gulp自动前缀地图
现在让我们看看什么是autoprefixer地图,如下所示。
autoprefixer不管你是否喜欢某样东西,在物理上做的时候确实很沉闷,当你大量依赖混杂物的时候,会使我们的代码变得混乱。以及,我们需要考虑什么应该被前缀化,什么可以保持原样。考虑到所有的事情,如果你真正关心的是一个完美的、合理的结果,利用前缀混合器可以使我们的工作增加一倍。这就是计算机化的真正意义所在。
在任何情况下,要想拥有这两个优势--一流的源代码地图和通过计算机化设备提供的一些帮助--你无疑可以解决这个问题。源码图的特点是指导结果中的哪一行代码与第一个记录和哪一行代码有关。假设你正在对你的结果进行后处理,并添加新的行(或消除它们,取决于你如何安排你的自动重合器),该指南通常会被破坏。自动重合器本身可以制作源代码图,但是,你需要修改前一个,这有点单调。
然而,有一个简单的特技,你可以用微不足道的努力来完成这两个任务。只需不允许有新的线条出现。Sass和autoprefixer都非常关心你的编码方式。而这意味着,只要你总结出结果是如何产生的,他们就不会远离你的代码。这样一来,假设你建议Sass将每个标准编成一行(产量样式减少),autoprefixer将在一个明确的类似行中添加新的原则,相应地保护源码表数据。
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
gulp.task('event', function () {
sass('Gulp/Demo/.scss', {sourcemap: true, style: 'compact'})
.pipe(prefix("最近2个版本", ">2%", "ie 6", "ie 5")
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist'))。
});
总结
在上述文章的帮助下,我们试着学习了Gulp自动补码器。从这篇文章中,我们学到了关于Gulp自动补码器的基本知识,我们也看到了Gulp自动补码器的整合以及我们如何在Gulp自动补码器中使用它。