server.js: only build the CSS when CSS changes, not the layouts (#2621)

build.js

@@ -70,6 +70,7 @@ function buildLocale (source, locale, opts) {
   const labelForBuild = `[metalsmith] build/${locale} finished`
   console.time(labelForBuild)
   const metalsmith = Metalsmith(__dirname)
+
   metalsmith
   // Sets global metadata imported from the locale's respective site.json.
     .metadata({
@@ -295,10 +296,6 @@ function getSource (callback) {
 // name. It brings together all build steps and dependencies and executes them.
 function fullBuild (opts) {
   const { selectedLocales, preserveLocale } = opts
-  // Build static files.
-  copyStatic()
-  // Build CSS
-  buildCSS()
   getSource((err, source) => {
     if (err) { throw err }
 
@@ -320,11 +317,16 @@ function fullBuild (opts) {
 if (require.main === module) {
   const preserveLocale = process.argv.includes('--preserveLocale')
   const selectedLocales = process.env.DEFAULT_LOCALE ? process.env.DEFAULT_LOCALE.toLowerCase().split(',') : process.env.DEFAULT_LOCALE
+  // Copy static files
+  copyStatic()
+  // Build CSS
+  buildCSS()
   fullBuild({ selectedLocales, preserveLocale })
 }
 
 exports.getSource = getSource
 exports.fullBuild = fullBuild
+exports.buildCSS = buildCSS
 exports.buildLocale = buildLocale
 exports.copyStatic = copyStatic
 exports.generateLocalesData = generateLocalesData

server.js

@@ -3,22 +3,22 @@
 // The server where the site is exposed through a static file server
 // while developing locally.
 
-const path = require('path')
-const st = require('st')
+const fs = require('fs')
 const http = require('http')
+const path = require('path')
 const chokidar = require('chokidar')
+const junk = require('junk')
+const st = require('st')
+const build = require('./build')
+
 const mount = st({
   path: path.join(__dirname, 'build'),
   cache: false,
   index: 'index.html',
   passthrough: true
 })
 
-const build = require('./build')
-const fs = require('fs')
 const port = process.env.PORT || 8080
-const junk = require('junk')
-
 const selectedLocales = process.env.DEFAULT_LOCALE ? process.env.DEFAULT_LOCALE.toLowerCase().split(',') : process.env.DEFAULT_LOCALE
 const preserveLocale = process.argv.includes('--preserveLocale')
 const serveOnly = process.argv.includes('--serve-only')
@@ -30,8 +30,9 @@ const opts = {
   usePolling: true
 }
 const locales = chokidar.watch(path.join(__dirname, 'locale'), opts)
-const layouts = chokidar.watch(path.join(__dirname, 'layouts'), opts)
-const statics = chokidar.watch(path.join(__dirname, 'static'), opts)
+const css = chokidar.watch(path.join(__dirname, 'layouts/css/**/*.styl'), opts)
+const layouts = chokidar.watch(path.join(__dirname, 'layouts/**/*.hbs'), opts)
+const staticFiles = chokidar.watch(path.join(__dirname, 'static'), opts)
 
 // Gets the locale name by path.
 function getLocale (filePath) {
@@ -44,10 +45,11 @@ function getLocale (filePath) {
 // 2. Choose what languages for the menu.
 function dynamicallyBuildOnLanguages (source, locale) {
   if (!selectedLocales || selectedLocales.length === 0) {
-    fs.readdir(path.join(__dirname, 'locale'), (e, locales) => {
-      if (e) {
-        throw e
+    fs.readdir(path.join(__dirname, 'locale'), (err, locales) => {
+      if (err) {
+        throw err
       }
+
       const filteredLocales = locales.filter(file => junk.not(file))
       const localesData = build.generateLocalesData(filteredLocales)
       build.buildLocale(source, locale, { preserveLocale, localesData })
@@ -59,7 +61,9 @@ function dynamicallyBuildOnLanguages (source, locale) {
 }
 
 build.getSource((err, source) => {
-  if (err) { throw err }
+  if (err) {
+    throw err
+  }
 
   locales.on('change', (filePath) => {
     const locale = getLocale(filePath)
@@ -81,15 +85,21 @@ build.getSource((err, source) => {
   })
 })
 
+css.on('change', () => build.buildCSS())
+css.on('add', (filePath) => {
+  css.add(filePath)
+  build.buildCSS()
+})
+
 layouts.on('change', () => build.fullBuild({ selectedLocales, preserveLocale }))
 layouts.on('add', (filePath) => {
   layouts.add(filePath)
   build.fullBuild({ selectedLocales, preserveLocale })
 })
 
-statics.on('change', build.copyStatic)
-statics.on('add', (filePath) => {
-  statics.add(filePath)
+staticFiles.on('change', build.copyStatic)
+staticFiles.on('add', (filePath) => {
+  staticFiles.add(filePath)
   build.copyStatic()
 })
 
@@ -104,9 +114,13 @@ http.createServer((req, res) => {
     req.url = `/${mainLocale}`
   }
   mount(req, res)
-}).listen(port, () => console.log(`\x1B[32mServer running at http://localhost:${port}/${mainLocale}/\x1B[39m`))
+}).listen(port, () => {
+  console.log(`\x1B[32mServer running at http://localhost:${port}/${mainLocale}/\x1B[39m`)
+})
 
 if (!serveOnly) {
   // Start the initial build of static HTML pages
+  build.copyStatic()
+  build.buildCSS()
   build.fullBuild({ selectedLocales, preserveLocale })
 }