npm 使ってサイト制作時に使うテンプレート

10311 ワード
HTML npm postcss CSS webpack HTML テキストリンク

やりたいこと

  • CSSやJSの minify とかやりたい
  • CSSで mixin とかネストとかしてみたい
  • Gulp 疲れちゃった

と言った感じ。
以前から使ってたテンプレートは Gulp を使用してましたが、重い腰を上げて npm で動作するように構成を変更しました

PostCSS篇

前回の記事（npm-scriptでPostCSS）もご参照ください。

今回は minify を解説。するのですが、インストールは今までと同じなので割愛します。
前回までの続きで、設定ファイルの最後に cssnano を追記します。
最後に追記することに注意してください。

また、autoprefixer がバージョンアップしたことによって、IE11での display: grid がうまく補完してくれなくなりました。
それに対応するために grid: "autoplace" を追記しましょう。

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

JS篇

JSの階層構造を維持して出力したい & minify したいは、Webpackを使います。

package.json と同階層に webpack.config.js を作成します。
中身はこんな感じにします。

webpack.config.js
const glob = require("glob");
const entries = glob.sync("./resources/js/src/common/**/*.js");

module.exports = {
  entry: entries,
  output: {
    path: __dirname + '/htdocs/common/js',
    filename: 'app.js'
  }
};

glob を使用しています。
これは何かというと、指定したディレクトリ内のファイルをまとめてエントリーポイントに設定してくれるプラグイン的なものです。

glob.sync("./resources/js/src/common/**/*.js");

上記の記述でディレクトリを指定しています。

output: {
  path: __dirname + '/htdocs/common/js',
  filename: 'app.js'
}

こちらの記述で、出力したいところと、ファイル名を設定しています。

ちなみに、同じ元ファイルを別々の場所に出力したいというときは下記のような方法を取ることで実現できます。

webpack.config.js
const glob = require("glob");
const entries = glob.sync("./resources/js/src/common/**/*.js");

const mainConfig = {
  entry: entries,
  output: {
    path: __dirname + '/htdocs2/js',
    filename: 'app.js'
  }
}

const distConfig = {
  entry: entries,
  output: {
    path: __dirname + '/htdocs/webroot/js',
    filename: 'app.js'
  }
}

module.exports = [mainConfig, distConfig]

開発篇

さて、それでは開発していくのですが、ファイルを保存したときに出力したいですよね。
package.json の scripts を下記のような感じにします。

package.json
"scripts": {
  "build:css": "postcss resources/css/src/**/[^_]* --base ./resources/css/src --dir htdocs",
  "watch:css": "npm run build:css -- --watch --map",
  "build:js": "webpack",
  "watch:js": "npx webpack --watch",
  "watch:project": "npm run watch:css | npm run watch:js"
},

見てもらうとわかるようにそれぞれの役割は

  • CSSファイルをビルドする
  • CSSファイルの変更を監視する
  • JSファイルをビルドする
  • JSファイルの変更を監視する
  • 「CSSファイルの変更を監視する」と「JSファイルの変更を監視する」を監視する

という感じになっています。
なので、ターミナルに

npm run watch:project

とすることで、CSSファイルとJSファイルの変更を監視し、変更されたら出力する…という感じになります。

ソース

GitHub に置いておきます。
https://github.com/axcelwork/package

使い方

適宜、使いたいディレクトリに一式を置いた後は

npm install

とすることで環境が整います。

では、また