CODEWITHSUNDEEP
javascriptgruntjsminify
user3507586
user3507586

Reputation: 41

Switching between minified code and normal code depending on environment?

Currently using grunt to minify all of my js files. I have a php script in my html that checks the url and decides whether to include one big minified javascript file or all of the regular javascript files. This is annoying because I have all of the files listed in two places; once in the grunt file and once in the switch statement in my php script. If someone on the team adds a new file to one but not the other, bad things happen. Is there an easier more efficient way to go about switching between the two? We want it so that our production server uses the minified code and our local dev environments use the un-minified code.

Upvotes: 1

Views: 276

Answers (1)

Jib
Jib

Reputation: 1582

I see three options there.

  1. You can host two versions of your web site: one for production and one for development. The development would rely on the non-minified source files. Be sure to use the same file name for "regular" and "minified" files as only their content should change. This would help you not to keep two different source bases.
+ mysite-dev
  + scripts
    - myscript.min.js (the non-minified content)
  index.html

+ mysite-prod
  + scripts
    - myscript.min.js (the minified content)
  index.html
  1. You can put all your regular and minified files in one single place and create symbolic links so that your website serves the files according to the dev/prod configuration.
+ mysite
  + scripts-all
    - myscript.js
    - myscript.min.js
  + scripts
    - myscript.js > ../scripts-all/myscript.min.js
  index.html
  1. You can create a script which would select the proper file names. For instance if you run the development website, the script would select the "regular" files. If you run the production website, only this script would change so that it selects the "minified" files. You can use the minify-ed files name in all your web site. And then and switch between a raw copy (in order). Note that this option is similar to the one you present in your question.
+ mysite
  + scripts-all
    - myscript.js
    - myscript.min.js
  + scripts
    - version-prod.js
    - version-dev.js
    - version.js > version-prod.js
  index.html
  1. My way ..

On my side, when I release a website I have a bash script which builds the website structure and files for both development and production based on a JSON description file.

The JSON description defines all the files to be served and tells whether they must be minified of not.

[
  {
    "file": "./index.html",
    "minify": false
  },
  {
    "file": "./scripts/app.js",
    "minify": true
  },
  ...
]

The bash script processes the description, minifies the files which have to be minified, and copies the resulting files to two distinct directories. The "development" files are kept as is while the "production" files are minified.

+ release
  + production
  + development

Then I select which version I want to expose (c.f.: solution #1). This lets me maintain one single code base which is minified (or not) depending on the target release type (development/production).

NOTE: It looks like there is no real clean solution to this situation as the served files may have a name which is not consistent with their content (i.e.: .min for non minified files).

Upvotes: 0

Related Questions