Problem/Motivation

After creating a neato subtheme and starting to work on the javascript I noticed that the JS files get minified as a result of the Gulp compress task.

Proposed resolution

Create a new folder for the javascript source files (as scss is for css) where the javascript sources will live. Update the Gulpfile's task to watch the source folder and to use the js folder as only the destination for minimized scripts.

Remaining tasks

Create patch for above functionality.

User interface changes

n/a

API changes

n/a

Data model changes

Javascript will now live in a source folder and will be minimized / compressed into the js folder.

CommentFileSizeAuthor
#12 neatojs.png8.3 KBachton
#7 javascript_doesn_t_have-2511612-7.patch335 bytesdasginganinja
#1 javascript_doesn_t_have-2511612-1.patch1.04 KBdasginganinja

Comments

dasginganinja’s picture

dasginganinja
Primary language English
Location Bethlehem, PA
commented
StatusFileSize
new javascript_doesn_t_have-2511612-1.patch1.04 KB

Patch is attached for this functionality.

kevinquillen’s picture

kevinquillen commented
Assigned: Unassigned » kevinquillen

kevinquillen’s picture

kevinquillen commented
Status: Active » Fixed
dasginganinja’s picture

dasginganinja
Primary language English
Location Bethlehem, PA
commented
Status: Fixed » Needs work

Kevin, I just noticed that you had the js-src folder inside of the js folder. With the patch I submitted the js-src folder was at the root, i.e. (css, scss, js, js-src).

This is broken on the current releases of both the 7.x and 8.x.

dasginganinja’s picture

dasginganinja
Primary language English
Location Bethlehem, PA
commented
StatusFileSize
new javascript_doesn_t_have-2511612-7.patch335 bytes

7.x & 8.x fix to move folders to intended location

dasginganinja’s picture

dasginganinja
Primary language English
Location Bethlehem, PA
commented
Status: Needs work » Needs review
dasginganinja’s picture

dasginganinja
Primary language English
Location Bethlehem, PA
commented 
	renamed:    js/js-src/scripts.js -> js-src/scripts.js
	new file:   js/scripts.js

I created the scripts.js in the JS folder so the generated file exists. This way in case we want to add the scripts to the .info file the file will be there. I do see that the 8.x version has scripts.js loading so we should probably create a patch to have the 7.x version have the same functionality.

kevinquillen’s picture

kevinquillen commented

How about we rename the directory to just 'src'? js-src is redundant.

dasginganinja’s picture

dasginganinja
Primary language English
Location Bethlehem, PA
commented

Alright how about we do it src/js and src/scss if that's the case. Anything that gets preprocessed should live in the src folder if that's the case.

achton’s picture

achton
Location Denmark
commented
StatusFileSize
new neatojs.png8.3 KB

I don't think minifed JS has the same relation to the source JS as CSS has to SCSS. I like the way the folder structure is out of the box right now:
Neato folder structure

I think the source JS should simply reside in the /js folder, and the minified JS should simply be generated in the theme root. Storing the files you really want to edit in the subdirectory of a subdirectory makes it more difficult to find.

kevinquillen’s picture

kevinquillen commented

achton, what happens in the event you want to add JS plugins to the theme? It would seem that load order takes precedent, and I am not sure if the minifier would be able to intelligently bundle them up to not prevent error.

With something like js/src, custom scripts can be minified, while external plugins would remain untouched by just being in js folder.

achton’s picture

achton
Location Denmark
commented

@kevin - I guess an option could be to require libraries to be named *.min.js, and then make the Gulp compress task omit those files from the js folder.

Another option would be to have to same-level JS folders: js and js-src. I find it cumbersome to have the actual JS source two levels deep, and the minified JS (which you never touch with your editor) in the upper folder level.

kevinquillen’s picture

kevinquillen commented

Should we name the output folder js-min, then?

kevinquillen’s picture

kevinquillen commented
Version: 7.x-1.x-dev » 8.x-1.x-dev
Status: Needs review » Active

Marking up for 8.x - resulting change will be backported to 7.x

kevinquillen’s picture

kevinquillen commented

What if we changed the js folder structure to:

js/
  src
  min
  vendor

With min being the output of src, vendor for any plugins?

finex’s picture

finex commented

Currently the neato starter kit already has two directories on the same level for the CSS ("scss" and "css"). Why don't do the same for JS with "js" and "js-src"?

About the 3rd-party plugins I suggest to keep them separated from the custom code.

For example on the current project I'm working to with neato theme I've collected all the plugins on the libraries subdirectory and the source code looks quite clean.

The minifier shouldn't care about the 3rd-party plugins which are usually shipped with a .min version.

On the themename.libraries.yml you can add all the JS (custom and 3rd-party) on the desired order. Example:

global-scripts:
  version: VERSION
  js:
    libraries/library_1/library_1.min.js: {}
    libraries/library_2/library_2.min.js: {}
    libraries/library_3/library_3.min.js: {}
    libraries/library_4/library_4.min.js: {}
    js/scripts.js: {}

If the css folder is separated from the scss, the same system should be used for the JS files. I prefer one less directory to dig :-)