• Node

[脱gulp]npm scriptを使おう。sass / browser-sync / ejs / postcss / uglify

gulpを使わず、
npm scriptで書けば、
チームで環境を整えるのが楽だし
なんといっても、可読性ですよ。
何をしてるのかわかりやすい。
脱Gulp!!
Gulp必要ないって。

その一歩として、
gulpでよく使うscriptを
まずはnpm scriptで作ってしまいましょう。

以下をnpmスクリプトで
作ります

・node-sass
・ejs
・browser-sync
・postcss
・autoprefixer

sassのコンパイル、
ejsでhtml管理、
browser-sync で自動でサーバー再現、チェック
postcss css圧縮
autoprefixer ベンダープレフィックス自動追加
uglyfy ES2015対応。js圧縮

このくらいかな？
まずはこれを
監視して、html,css,jsに変更があったら自動でrun
サーバーリロードするやつ。

全局面対応NPM型決戦SCRIPT(でんっ!でんっ!でんっ!でんっ!でんでんっ!)
好きなscriptを選んで、監視対象にできるのが強み。

だれかの「脱gulp」のお役に立てばうれしい。
仕事を頂ければ、なおうれしい。

develop/html/に .ejsを配置。
develop/html/assets/に ディレクトリごとの .scss .jsを配置。
dist/html/に出力って感じ

$npm run doingAll　で全自動

package.json

{
  "name": "npmscripts-eva",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "doingAll": "npm run browser-sync & npm run sass-all-watch & npm run ejs-watch & npm run js-all-watch",

    "browser-sync": "browser-sync start --server --files='**/*.html, **/*.css, **/*.js' --startPath='/dist/html/' ",

    "ejs-watch": "nodemon --ext ejs --watch ./develop/ -x 'npm run ejs'",
    "ejs": "ejs-cli --base-dir develop/ 'html/**/*.ejs' --out dist/",

    "sass-all-watch": "nodemon --ext scss --watch ./develop/html/assets/ -x 'npm run sass-all'",
    "sass-all": "npm run sass-common && npm run sass-top && npm run sass-autoprefixer",

    "sass-common": "npm run sass-common-release",
    "sass-common-build": "node-sass --include-path ./develop/ ./develop/html/assets/common/css/common.scss ./dist/html/assets/common/css/common.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
    "sass-common-release": "node-sass --include-path ./develop/ ./develop/html/assets/common/css/common.scss ./dist/html/assets/common/css/common.css --output-style compressed --source-map true",

    "sass-top": "npm run sass-top-release",
    "sass-top-build": "node-sass --include-path ./develop/ ./develop/html/assets/top/css/style.scss ./dist/html/assets/top/css/style.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
    "sass-top-release": "node-sass --include-path ./develop/ ./develop/html/assets/top/css/style.scss ./dist/html/assets/top/css/style.css --output-style compressed --source-map true",

    "sass-autoprefixer": "postcss --replace ./dist/html/assets/**/**/**/*.css --config ./postcss.config.js -m",

    "js-all-watch":"npm run js-common-watch",

    "js-common-watch":"nodemon --ext js --watch ./develop/html/assets/common/js -x 'npm run js-common-babel && npm run js-common-uglify' ",
    "js-common-uglify": "uglifyjs ./dist/html/assets/common/js/script.js  --compress --mangle --output ./dist/html/assets/common/js/script.js",
    "js-common-babel":"babel develop/html/assets/common/js/script.js --out-file dist/html/assets/common/js/script.js",

    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "autoprefixer": "^9.6.1",
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "browser-sync": "^2.26.7",
    "ejs-cli": "^2.0.1",
    "node-sass": "^4.12.0",
    "node-sass-import": "^2.0.1",
    "nodemon": "^1.19.1",
    "postcss": "^7.0.17",
    "postcss-cli": "^6.1.3",
    "uglify-es": "^3.3.9"
  },
  "browserslist": [
    "last 2 versions",
    "not ie < 11",
    "Android >= 4",
    "iOS >= 10"
  ]
}

$npm run doingAll　で全自動