gulp-cssnextにPostCSSプラグインを追加する方法
cssnextをgulpで使ってみたかったので、gulp-cssnextを導入してみたのですが、プラグインの追加方法でちょっとつまづいたので、経緯と解決法をまとめてみました。
基礎知識
cssnextは、CSSの先行実装を、現状のブラウザが解釈できるCSSに変換してくれるポストプロセッサーです。
cssnextは、PostCSSのラッパーに当たるツールなので、その機能を内包しています。
前提
CSSのコンパイルはPostCSSの機能をラップしているgulp-cssnextにて行う。
(gulp-postcss側から、cssnextを用いてコンパイルするのではないやり方)
gulp-cssnextのインストール
プロジェクトのルートディレクトリで以下のコマンドを実行。
$ npm i gulp-cssnext --save-dev
CSSのコンパイル
gulpfile.jsのタスクは以下のような形で記述すれば、CSSのコンパイルは可能。
var gulp = require('gulp');
var cssnext = require('gulp-cssnext');
var paths = {
'src': 'src/',
'dist': 'dist/'
}
gulp.task("css", function() {
return gulp.src(paths.src + 'css/*.css')
.pipe(cssnext({
compress: false,
import: true
}))
.pipe(gulp.dest(paths.dist + 'css/'))
});
ただし、gulp-cssnextには、importなどの機能はデフォルトで実装されているが、
Sassのようなネストやミックスインといった機能を使用するためには、プラグインを追加する必要がある模様。
プラグインのオプションを追加
公式サイトによれば、PostCSSのプラグインを追加するには、このようにプラグイン名を指定して読みこめば良い、とあるので、gulpのタスクにオプションを追記してみる。
※ここでは、Sassのようなシンプルな変数表記を実現するpostcss-simple-varsプラグインを追記した。
gulp.task("css", function() {
return gulp.src(paths.src + 'css/*.css')
.pipe(cssnext({
compress: false,
import: true,
plugins: [
require("postcss-simple-vars")
]
}))
.pipe(gulp.dest(paths.dist + 'css/'))
});
その上で、ソース側のCSS内でネストを使ってコンパイルしてみると、以下のようなエラーが出てしまい、実行できなかった。
Error: Cannot find module 'postcss-simple-vars'
プラグインのインストール
これは、プラグイン自体がインストールされていないので当然かと思い、プロジェクトのルートディレクトリで下記のコマンドを実行してみた。
$ npm i postcss-simple-vars --save-dev
すると、今度はCSSのコンパイルに成功。
試しに、Sassライクな変数を使ってみると、思い通りに変換できていることも確認できた。
$textcolor: #000;
body {
color: $textcolor;
}
body {
color: #000;
}
まとめ&分かったこと
- cssnextはPostCSSの機能をラップしている
- gulp-cssnextも、それ単体としてPostCSSをラップしている
- gulp-cssnextが現時点で内蔵している機能やプラグインはデフォルトで使用できる
- gulp-cssnextに実装されていないPostCSSプラグインを使いたい場合は、requireするだけではなく、自分で個別にインストールする必要がある
- プラグインをインストールする場所は、プロジェクトのルートディレクトリでnpm installすればOK
注意点
基本的には上記のやり方で問題なさそうだが、プラグインによっては読み込み順や、相互に依存しているものもあるようなので、注意が必要。
例えば、Sassのようなミックスインを可能にするpostcss-mixinsは、 postcss-simple-varsとpostcss-nestedの前にセットする必要があると書かれているので、下記のようにプラグインを指定する。
gulp.task("css", function() {
return gulp.src(paths.src + 'css/*.css')
.pipe(cssnext({
compress: false,
import: true,
plugins: [
require("postcss-mixins"),
require("postcss-simple-vars"),
require("postcss-nested")
]
}))
.pipe(gulp.dest(paths.dist + 'css/'))
});
Author And Source
この問題について(gulp-cssnextにPostCSSプラグインを追加する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/youthkee/items/2dfdd8fdfee3bd2b7e45著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .