CSS
JavaScript
Node.js
npm
postcss

Gulp も Webpack も疲れたよ…。
そんな感じなので現在、npm-scriptでフロントエンドの環境構築を進めています。

全体の目次

  • PostCSS編
  • HTML編
  • Javascript編

こんな感じでどんどん書いていければいいと思います。

PostCSSの環境構築

まずは、postcss-cliをインストール

公式ドキュメントは以下
npm - PostCSS CLI
github - postcss/postcss-cli

npm install -D postcss-cli

これで基本的な設定は完了。
そして、package.jsonscripts節で下記を設定する。

package.json
"scripts": {
    "css": "postcss <元となるディレクトリ> --dir <出力ディレクトリ>"
}

そして、コマンド実行。

npm run css

これで、ひとまずは出力されるはず。

階層構造を維持して出力

公式ドキュメント見ても使い方がわからず、結構ググったけど中々出てこなかった。
けど、本家のissueを眺めてると使い方がありました。:relaxed:

package.json
"scripts": {
    "css": "postcss <元となるディレクトリ> --base <ベースとなるディレクトリ> --dir <出力ディレクトリ>"
}

僕の環境の場合は以下で出力されました。

package.json
"scripts": {
    "css": "postcss resources/css/src --base ./resources/css/src --dir htdocs"
},

autoprefixer

まずはインストール。

npm install -D autoprefixer

v3以降からプラグイン等々の設定が変わったみたいです。
開発ディレクトリのルートに postcss.config.js ファイルを作成し、下記を追加。

postcss.config.js
module.exports = () => ({
  plugins: {
    'autoprefixer': {
      "browsers": "last 2 versions"
    }
  }
})

やったね。:relaxed:

css-import

まずはインストール。

npm install -D postcss-import

postcss.config.js ファイルを下記のような形にする。
'postcss-import': {}を追加)

postcss.config.js
module.exports = () => ({
  plugins: {
    'postcss-import': {}
    'autoprefixer': {
      "browsers": "last 2 versions"
    }
  }
})

package.jsonでは、インポートするファイルは除外設定をしてあげましょう。
今回の例で言うとディレクトリ名に _(アンダースコア)が入っているものは除外という設定です。

package.json
"css": "postcss resources/css/src/**/[^_]* --base ./resources/css/src --dir htdocs"

CSS側では下記のように importしてあげればOK。

test.css
@charset "utf-8";

@import './_c/style_pc.css';

h1 {
  display: flex;
}

やったね。:relaxed:

ネストとか変数とか

はい、インストール。

npm install -D precss
npm install -D postcss-mixins

設定ファイルは追記する順番に注意します。

postcss.config.js
module.exports = () => ({
  plugins: {
    'postcss-import': {},
    'postcss-mixins': {},
    'precss': {},
    'autoprefixer': {
      "browsers": "last 2 versions"
    }
  }
})

やったね。:relaxed:

続きます。