Fragmented Thought
TwitterGitHub

Sample NPM package.json for Drupal

By

Published:

Lance Gliser

Heads up! This content is more than six months old. Take some time to verify everything still works as expected.

I've recently started to dump build tools. The abstractions just aren't needed, and add complexity in some cases. To that end, I'm nearly doing all my asset management in package.json with NPM scripts. For existing sites I'm maintaining, I can use this as a simple drop in to help get started. It may require a little ossification site to site, depending on if you need to ignore certain themes, or modules. I think the base package here is clear enough you'll be able to replicate the pieces required.

To get started, copy the below into your top-level directory named package.json. Open terminal, and run npm install. It'll grab all the dependencies it requires, build, and attempt to start watching. After the initial install you can setup to work by just running watch:all.

Tools included in this package:

  • Scss to css compressed with source maps automatically prefixed to handle the latest 2 browser versions
  • JS checked for quality through jshint, and if passed, minified in place to .min.js files.

Note that some of these scripts need existing files to work with, or they will error out. Your initial run might fail because of conditions like this not being met. You can use the trick listed as scss:modules to disable any particular script you like.

{
  "name": "example.com",
  "version": "1.0.0",
  "description": "Drupal site",
  "main": "index.php",
  "author": "",
  "license": "ISC",
  "browserslist": ["last 2 versions"],
  "scripts": {
    "autoprefixer": "npm run autoprefixer:modules && npm run autoprefixer:themes",
    "autoprefixer:modules": "postcss -u autoprefixer -r sites/all/modules/custom/**/*.css",
    "autoprefixer:themes": "postcss -u autoprefixer -r sites/all/themes/**/*.css",
    "scss": "npm run scss:modules && npm run scss:themes",
    "scss:modules": "node-sass --source-map true --output-style compressed -o sites/all/modules/custom sites/all/modules/custom",
    "scss:modules": "echo \"Debug: scss:modules disabled\"",
    "scss:themes": "node-sass --source-map true --output-style compressed -o sites/all/themes sites/all/themes",
    "uglify": "npm run uglify:modules && npm run uglify:modules",
    "uglify:modules": "uglifyjs-folder sites/all/modules/custom -e -o sites/all/modules/custom",
    "uglify:themes": "uglifyjs-folder sites/all/themes -e -o sites/all/themes",
    "lint": "npm run lint:modules && npm run lint:themes",
    "lint:modules": "jshint sites/all/modules/custom",
    "lint:themes": "jshint sites/all/themes",
    "build:css": "npm run scss && npm run autoprefixer",
    "build:modules:css": "npm run scss:modules && npm run autoprefixer:modules",
    "build:themes:css": "npm run scss:themes && npm run autoprefixer:themes",
    "build:js": "npm run lint && npm run uglify",
    "build:modules:js": "npm run lint:modules && npm run uglify:modules",
    "build:themes:js": "npm run lint:themes && npm run uglify:themes",
    "build:all": "npm run build:css && npm run build:js",
    "watch:modules": "npm-run-all -p watch:modules:css watch:modules:js",
    "watch:modules:css": "onchange \"sites/all/modules/custom/**/*.scss\" -- npm run build:modules:css",
    "watch:modules:js": "onchange \"sites/all/modules/custom/**/*.js\" -- npm run build:modules:js",
    "watch:themes": "npm-run-all -p watch:themes:css watch:themes:js",
    "watch:themes:css": "onchange \"sites/all/themes/**/*.scss\" -- npm run build:themes:css",
    "watch:themes:js": "onchange \"sites/all/themes/**/*.js\" -- npm run build:themes:js",
    "watch:all": "npm-run-all -p watch:modules watch:themes",
    "postinstall": "npm run build:all && npm run watch:all"
  },
  "devDependencies": {
    "autoprefixer": "latest",
    "browser-sync": "latest",
    "mkdirp": "latest",
    "node-sass": "latest",
    "npm-run-all": "latest",
    "onchange": "latest",
    "postcss-cli": "latest",
    "jshint": "latest",
    "uglify-js": "latest",
    "uglifyjs-folder": "latest"
  }
}