Sample NPM package.json for Drupal

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 modification site to site, depending on if you need to ignore certain themes, or modules. But, 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.

  1. {
  2.   "name": "example.com",
  3.   "version": "1.0.0",
  4.   "description": "Drupal site",
  5.   "main": "index.php",
  6.   "author": "",
  7.   "license": "ISC",
  8.   "browserslist": [
  9.     "last 2 versions"
  10.   ],
  11.   "scripts": {
  12.     "autoprefixer": "npm run autoprefixer:modules && npm run autoprefixer:themes",
  13.     "autoprefixer:modules": "postcss -u autoprefixer -r sites/all/modules/custom/**/*.css",
  14.     "autoprefixer:themes": "postcss -u autoprefixer -r sites/all/themes/**/*.css",
  15.     "scss": "npm run scss:modules && npm run scss:themes",
  16.     "scss:modules": "node-sass --source-map true --output-style compressed -o sites/all/modules/custom sites/all/modules/custom",
  17.     "scss:modules": "echo \"Debug: scss:modules disabled\"",
  18.     "scss:themes": "node-sass --source-map true --output-style compressed -o sites/all/themes sites/all/themes",
  19.     "uglify": "npm run uglify:modules && npm run uglify:modules",
  20.     "uglify:modules": "uglifyjs-folder sites/all/modules/custom -e -o sites/all/modules/custom",
  21.     "uglify:themes": "uglifyjs-folder sites/all/themes -e -o sites/all/themes",
  22.     "lint": "npm run lint:modules && npm run lint:themes",
  23.     "lint:modules": "jshint sites/all/modules/custom",
  24.     "lint:themes": "jshint sites/all/themes",
  25.     "build:css": "npm run scss && npm run autoprefixer",
  26.     "build:modules:css": "npm run scss:modules && npm run autoprefixer:modules",
  27.     "build:themes:css": "npm run scss:themes && npm run autoprefixer:themes",
  28.     "build:js": "npm run lint && npm run uglify",
  29.     "build:modules:js": "npm run lint:modules && npm run uglify:modules",
  30.     "build:themes:js": "npm run lint:themes && npm run uglify:themes",
  31.     "build:all": "npm run build:css && npm run build:js",
  32.     "watch:modules": "npm-run-all -p watch:modules:css watch:modules:js",
  33.     "watch:modules:css": "onchange \"sites/all/modules/custom/**/*.scss\" -- npm run build:modules:css",
  34.     "watch:modules:js": "onchange \"sites/all/modules/custom/**/*.js\" -- npm run build:modules:js",
  35.     "watch:themes": "npm-run-all -p watch:themes:css watch:themes:js",
  36.     "watch:themes:css": "onchange \"sites/all/themes/**/*.scss\" -- npm run build:themes:css",
  37.     "watch:themes:js": "onchange \"sites/all/themes/**/*.js\" -- npm run build:themes:js",
  38.     "watch:all": "npm-run-all -p watch:modules watch:themes",
  39.     "postinstall": "npm run build:all && npm run watch:all"
  40.   },
  41.   "devDependencies": {
  42.     "autoprefixer": "latest",
  43.     "browser-sync": "latest",
  44.     "mkdirp": "latest",
  45.     "node-sass": "latest",
  46.     "npm-run-all": "latest",
  47.     "onchange": "latest",
  48.     "postcss-cli": "latest",
  49.     "jshint": "latest",
  50.     "uglify-js": "latest",
  51.     "uglifyjs-folder": "latest"
  52.   }
  53. }

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.