Gulp環境でPostCSSを使用する

PostCSSをGulp環境で使用する方法をメモ。

設定方法

Gulpの環境を用意して、gulp-postcssをします。
今回は例としてautoprefixerを使ってみるので、合わせてインストールしておきます。

npm install gulp-postcss --save-dev
npm install autoprefixer --save-dev

gulpfile.jsに設定を記述します。

gulpfile.js

var gulp         = require('gulp');
var postcss      = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

gulp.task('css', function () {
  // PostCSSで使用するプラグインを指定
  var plugins = [
    autoprefixer({browsers: ['last 2 version']}),
  ];
  return gulp.src('src/*.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('dest'));
});

srcディレクトリ内のCSSを使って、destディレクトリに生成するようにしました。
srcディレクトリを作成して、その中でtest.cssを作成します。

src/test.css

.hoge {
  display: flex;
}

下記コマンドを実行します。

gulp css

destディレクトリ以下にtest.cssが生成されました。

dest/test.css

.hoge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年12月
1234567
891011121314
15161718192021
22232425262728
293031