Gulp で PostCss_html/css_WEB-ITnose を使用する方法

概要

PostCSS は、変数、ミックスイン、将来の CSS 構文、インライン イメージなどをサポートする、JS プラグインを使用して CSS を変換するツールです。 PostCSS は、カスタム プラグインとツールのエコシステムを通じて CSS を変革することを目的としています。 Sass や Less などのプリコンパイラーと同じ原則に基づいて動作する PostCSS は、拡張された構文と機能を最新のブラウザー フレンドリーな CSS に変換します。 Gulp ツールを使用すると、Sass and Less のコンパイルと同じように、ビルド プロセスを通じてスタイルを変換できます。

Text

PostCSS を使用したことがない場合、または PostCSS が何であるかを知らない場合は、この記事で基本を紹介します。 PostCSS プラグインのインストール方法と使用方法を含む、PostCSS の説明。

このチュートリアルでは、人気のある自動化ツールである Gulp で PostCSS を使用する方法を説明します。この記事は Gulp の入門チュートリアルではないため、Gulp の基本については説明しません。ただし、すぐに使い始めるには、この Gulp.js の概要を参照してください。

1. プロジェクトのセットアップ

このチュートリアルを開始する前に、作業するプロジェクト フォルダーを作成する必要があります。このフォルダーには、Gulp がすでにインストールされているとともに、「initial」と「final」 (または任意の別の名前) という名前の 2 つの内部フォルダーがインストールされている必要があります。いわゆる「初期」フォルダーには、生の CSS コードが含まれます。 「初期」フォルダーには、処理済みのファイルが保存され、すぐに使用できるようになります。

続行する前に、プロジェクト フォルダーでターミナルを使用して開き、次のコマンドを実行します:

npm install gulp-postcss --save-dev

PS: --save-dev added: インストールされるプラグインを示します 追加しますproject.json ファイルに依存関係として追加します。これはマルチプレイヤー協力モードに大きな助けになります。他の開発者がパッケージのインストールで npm install コマンドを実行すると、すべてのプラグインが自動的にインストールされます。

この時点で、フォルダー構造は次のようになります:

• initial — オリジナルの CSS ファイルのフォルダー。

  • style.css — 未処理の CSS スタイル。後で編集します。

• final — 処理された CSS ファイルのフォルダー

• node_modules — すべての NPM モジュールのフォルダー

  • gulp — Gulp のインストール時に作成されたフォルダー

  • gulp-postcss —実行後に作成されるフォルダー上記のコマンド。

• guplfile.js — Gulp ファイル

• package.json — package.json ファイル

2. プラグインをインストールします

始める前に、いくつかの基本的なプラグインをインストールしましょう。私たちが使用するプラグインは short-color (カラー プラグイン) です。このプラグインは基本的に既存のカラー プロパティを拡張し、2 番目のカラー値 (背景色として使用されます) を設定します。次のコマンドを実行して short-color をインストールします。

npm install postcss-short-color --save-dev

gulp-postcss と postcss-short-color を同時にインストールして使用することもできます:

npm install gulp-postcss postcss-short-color -- save-dev

これら 2 つのプラグインをインストールした後、プラグインの操作を開始できるように、gulpfile.js ファイルを開いて編集する必要があります。まず、次のコードを使用して両方のプラグインを有効にします:

var gulp = require('gulp');    var postcss = require('gulp-postcss');    var shortColor = require('postcss-short-color');

次に、生の CSS ファイルを処理し、準備ができたスタイルシートを作成するための gulp タスクを設定しましょう。これを行うコードは次のとおりです:

gulp.task('css', function () {      return gulp.src('initial/*.css')      .pipe(postcss([shortColor]))      .pipe(gulp.dest('final'));    });    

まず CSS というタスクを作成します。対応する機能を実行する場合は、この名前を使用できます。 gulp.src()内で処理するファイルを指定できます。 * CSS を使用すると、「initial」フォルダー内のすべての CSS ファイルが処理されます。

次に、pipe() 関数を使用してすべてのプラグインを呼び出します。これを行うには、すべてのプラグインをパラメータとして postcss() 関数に渡す必要があります。この基本的な例では、実際に渡すプラグインは 1 つだけです。 次のセクションでは、複数のプラグインを渡す方法を説明します。プラグインがパイプされた後、gulp.dest() を使用して処理されたファイルの宛先が設定されます。

すべてが正しく設定されているかどうかをテストするには、「initial」フォルダー内に style.css ファイルを作成します。 style.css ファイルには次の CSS が含まれます:

section {    color: white black;}

次に、ターミナルで gulp css コマンドを実行する必要があります。この時点で、「最終」フォルダーに、次の CSS のような style.css ファイルが表示されるはずです:

section {    color: white;    background-color: black;}

CSS スタイルが上記の CSS スタイルと同じであれば、すべてが正常に動作していると考えられます。 。

3.安装多个插件

只使用一个基本的插件并不能从根本上减轻你的工作量。PostCSS有很多令人印象深刻的且令人难以置信的有用的插件，所以在大多数情况下，你需要使用到的插件不止一个。在本节中，我将告诉你如何在工作中同时使用多个插件。

您可能会发现有三个PostCSS插件（包）是非常有用的：即 short , cssnext 和 autoprefixer

• short将使你少写并且速记大量的CSS属性。 例如:

.heading {    font-size: 1.25em 2;}

将会被解析成：

.heading {    font-size: 1.25em;    line-height: 2;}

• cssnext能够在你的css样式表中，使用最新的CSS语法。例如，下面的CSS：

.link {      color: color(green alpha(-10%));    }

将被转换为：

.link {      background: rgba(0, 255, 0, 0.9);    }

• 最后，autoprefixer将会在您的CSS和转换后的样式文件中添加供应商前缀：

img {      filter: grayscale(0.9);    }    

转换为：

img {      -webkit-filter: grayscale(0.9);      filter: grayscale(0.9);    }    

现在让我们看看如何安装这些插件，然后用它们来改造我们的样式表。在项目目录下运行下面的命令：

npm install autoprefixer postcss-short postcss-cssnext --save-dev

我们需要修改我们的gulp task来包含所有这些插件，代替用管道将所有这些插件一个一个的传递，我们将它们存储在易于维护和简洁的阵列。下面是我们的gulpfile.js的代码：

var gulp = require('gulp');    var postcss = require('gulp-postcss');    var autoprefixer = require('autoprefixer');    var cssnext = require('postcss-cssnext');    var shortcss = require('postcss-short');    gulp.task('css', function() {      var plugins = [        shortcss,        cssnext,        autoprefixer({browsers: ['> 1%'], cascade: false})      ];      return gulp.src('initial/*.css')      .pipe(postcss(plugins))      .pipe(gulp.dest('final'));    });    

您可能已经注意到了，我已经指定了Autoprefixer插件的一些选项。Autoprefixer输出这些选项确定的CSS，在这种情况下，我说的是插件支持所有全球使用量超过1％的浏览器。我也被禁用级联，让所有的前缀和不带前缀属性左对齐。类似的选项也可用于大多数其他插件。

为了测试，如果一切正常，将出在样式表下面的CSS：

.prefix-filter {      display: flex;    }          .cssshort-section {      text: #333 bold justify uppercase 1.25em 1.7 .05em;    }    .cssnext-link {      color: color(blue alpha(-10%));    }    .cssnext-link:hover {      color: color(orange blackness(80%));    }

如果现在在终端中运行gulp css，你应该在“final”文件夹中可以得到style.css，如下：

.prefix-filter {      display: -webkit-box;      display: flex;    }          .cssshort-section {      color: #333;      font-weight: 700;      text-align: justify;      text-transform: uppercase;      font-size: 1.25em;      line-height: 1.7;      letter-spacing: .05em;    }          .cssnext-link {      color: #0000ff;      color: rgba(0, 0, 255, 0.9);    }          .cssnext-link:hover {      color: rgb(51, 33, 0);    }

４.插件的执行顺序

在最后一节的例子很清楚说明了PostCSS的实用性。所有PostCSS的力量在于它的插件。

我们具体来研究两个插件 rgba-fallback 和 color-function ， rgba-fallback 插件会转换一个RGBA颜色为16进制格式，color-function将改变CSS的color()函数来兼容更多菜单CSS，比方说，你有一下的CSS：

body {      background: color(orange a(90%));    }

如果你运行的颜色功能插件之前的RGBA-后备插件，就像这样：

var plugins = [      rgbafallback,      colorfunction    ];

你将得到下面的CSS:

body {      background: rgba(255, 165, 0, 0.9);    }

正如你所看到的，在处理CSS时没有RGBA回退。这样的异常原因是回退插件运行时，它发现背景是color(orange a(90%))，并且不知道该怎么办。后来，color函数插件执行，并从原来的color函数创建RGBA颜色值。

如果你扭转插件顺序，按以下顺序运行它们：

var plugins = [      colorfunction,      rgbafallback     ];     

最后的CSS是这样的：

body {      background: #ffa500;      background: rgba(255, 165, 0, 0.9)    }

这一次的颜色插件首先把背景色的RGBA值和后备插件层增加一个十六进制回退。

总结

在本教程中我已经介绍了使用gulp和PostCSS一起使用的基本知识。随着插件和gulp的正确组合，可以节省开发的许多时间和避免不必要的麻烦。如果您有任何技术问题或建议,请尽管在本教程的下面进行评论，以便于我们能更好的学习交流。

作者信息：

原文作者：Nitish Kumar

原文链接： https://http://www.sitepoint.com/how-to-use-postcss-with-gulp/

中文首发博文链接： https://blog.maxleap.cn/archives/789

翻译自： MaxLeap 团队_前端研发人员：Ammie Bai

欢迎关注微信订阅号，单纯分享技术干货：从移动到云端欢迎加入我们的MaxLeap活动qq群：555973817，我们将不定期做技术分享活动。