Roots Discourse

Size of node_modules directory

This is a question about installing Sage and getting the development environment set up and gulping Sage. To be succinct:

I wound up with a node_modules directory with a size of 66.5 MB (69,804,032 bytes). That seems pretty heavy to me. Is that correct?

Important note: My initial problem was that gulp gave me this error:
Error: Cannot find module ‘minimist’

Details

Operating system:

I am using XAMPP on a Windows 8 machine.

Versions:

• node –v = v4.1.2
• gulp –v = CLI Version 3.9.0 Local version 3.9.0
• bower –v = 1.5.3

The original problem:

I downloaded Sage and copied it to my [wordpress_directory]\themes[theme_name]. I already had node.js, but I followed the advice here: https://roots.io/sage/docs/theme-development-and-building/

I did this:

• npm install –g gulp bower
• npm install
• bower install
• gulp

The latter got me this:

C:\xampp\htdocs\wp\wp-content\themes\bootstrappin-theme>gulp
module.js:338
throw err;
^

Error: Cannot find module 'minimist’
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (C:\xampp\htdocs\wp\wp-content\themes\bootstrappin-the
me\gulpfile.js:2:20)
at Module._compile (module.js:434:26)
at Object.Module._extensions…js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)

What I tried

1.) (This did not resolve my problem) I tried running

npm install gulp

I got this:

C:\xampp\htdocs\wp\wp-content\themes\bootstrappin-theme>npm install gulp

gulp@3.9.0 node_modules\gulp
├── interpret@0.6.6
├── pretty-hrtime@1.0.1
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.2.0
├── semver@4.3.6
├── tildify@1.1.2 (os-homedir@1.0.1)
├── v8flags@2.0.10 (user-home@1.1.1)
├── chalk@1.1.1 (ansi-styles@2.1.0, supports-color@2.0.0, escape-string-regexp@1
.0.3, has-ansi@2.0.0, strip-ansi@3.0.0)
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.
1.5)
├── liftoff@2.2.0 (extend@2.0.1, rechoir@0.6.2, flagged-respawn@0.3.1, resolve@1
.1.6, findup-sync@0.3.0)
├── vinyl-fs@0.3.14 (graceful-fs@3.0.8, strip-bom@1.0.0, vinyl@0.4.6, defaults@1
.0.3, mkdirp@0.5.1, through2@0.6.5, glob-stream@3.1.18, glob-watcher@0.0.6)
└── gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reinterpolate
@3.0.0, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, beeper@1.1.0, object-a
ssign@3.0.0, replace-ext@0.0.1, vinyl@0.5.3, lodash.template@3.6.2, through2@2.0
.0, multipipe@0.1.2, dateformat@1.0.11)

2.) (This did make it possible to compile the code, but I wonder if node_modules needs to be so huge) From here: Npm Debugging Guidelines (Failed npm install, bower install, or gulp build? Read this)

I tried these steps

npm install -g npm@latest

gives me this:

C:\Users\Bessie\AppData\Roaming\npm\npm -> C:\Users\Bessie\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
npm@3.3.6 C:\Users\Bessie\AppData\Roaming\npm\node_modules\npm

npm cache clear

Since I’m using Xampp on Windows 8, I just used the file manager to delete node_modules

Next, I did:

npm install

This took quite a long time. There was so much stuff spilled out in the command window, it got truncated. Afterwards, I had a node_modules with a size: 66.5 MB (69,804,032 bytes)

After this command:

gulp

I got this output:

[13:29:18] Using gulpfile C:\xampp\htdocs\wpe\gulpfile.js
[13:29:18] Starting ‘clean’…
[13:29:18] Finished ‘clean’ after 4.2 ms
[13:29:18] Starting ‘default’…
[13:29:18] Starting ‘build’…
[13:29:18] Starting ‘wiredep’…
[13:29:18] Finished ‘default’ after 152 ms
[13:29:19] Finished ‘wiredep’ after 195 ms
[13:29:19] Starting ‘styles’…
[13:29:24] Finished ‘styles’ after 5.73 s
[13:29:24] Starting ‘jshint’…
[13:29:24] Finished ‘jshint’ after 150 ms
[13:29:24] Starting ‘scripts’…
[13:29:30] Finished ‘scripts’ after 5.88 s
[13:29:30] Starting ‘fonts’…
[13:29:30] Starting ‘images’…
[13:29:30] gulp-imagemin: Minified 0 images
[13:29:30] Finished ‘images’ after 6.05 ms
[13:29:30] Finished ‘fonts’ after 23 ms
[13:29:30] Finished ‘build’ after 12 s

(It worked. When I chose the theme, there was CSS.)

This probably fixed some maximum file path issues you were having.

66mb sounds right. Note that this does not get deployed with your theme and do not hit anyone’s browsers. These are just development tools.

Actually mine is oftentimes much larger than that.

Is it big, the vast majority of that space being taken up by actual executables that do the various types of lossless image compression.

There has been a comment or two before about the size of the folder. I suggest looking at it from the perspective of “look at all the stuff that is now automated for me”. The bigger the folder is, the more stuff it’s doing for you automatically.