Initr Sample
A sample project for setting up Initr.
This repo serves as a complete example of how to set up Initr for development and production. The bulk of the work is handled by grunt.
While this example uses php to hold a configuration variable, this can easily be substituted out for any other server language. The point here is to not have to update your HTML and JavaScipt for development or production. Change one config var on your server from true
to false
and Initr will begin fetching minified versions of your scripts.
Built by Chris Kihneman at Mindgruve.
Get it running
Install node
and npm
version >=0.8.0
.
Install grunt
version >=0.4.0
.
Clone or fork this repo, git clone https://github.com/mindgruve/initr-sample.git initr-sample
. Then cd initr-sample
.
Now you can run grunt
and get a fresh build of your minified files.
To see the sample in action, you need to boot up a server. Luckily, we can use grunt-php
(docs) to help us boot one up real quick. The requirement here is to have PHP 5.4.0+ installed on your machine and in your path. You could always use MAMP or the like as well.
Boot up the server with grunt server
. The default port is 8000
. So after running the command you will be prompted to open http://localhost:8000
in your browser.
By default, the project is in development mode. Meaning scripts loaded will not be minified, and Initr will be in development mode as well. Open your console and take a look at the logs.
To put the project into production mode, open web/config.php
in a text editor, and change $IS_DEV
to false
. Refresh your browser, and now all scripts being loaded are minified.
From here, it is really best to take a look through the project, especially Gruntfile.js
, web/index.php
and web/javascript/initr.config.js
.
Documentation
Put your scripts in web/javascript/
.
Put vendor scripts (code that is not yours) in web/javascript/vendor/
.
After making any changes to your files, you will need to run grunt
to prep your scripts for production.
You can run grunt watch
to lint your files as you work.
Grunt is doing the heavy lifting here. Lets outline what exactly it does when you run grunt
.
-
Removes the folder
web/javascript/min/
that has your minified scripts inside, as we will be replacing it with a fresh copy of all your scripts. -
Lints (via jshint)
Gruntfile.js
and all scripts inweb/javascript/
. However, it will not lint any of these scripts because they are either already minified, or they are not your code:- Scripts with the extension
.min.js
. - Scripts in your
web/javascript/vendor/
folder. - Scripts in your
web/javascript/min/
folder (we will be compiling these linted scripts here).
- Scripts with the extension
-
Concatenates
web/javascript/vendor/consoleshiv.js
,web/javascript/vendor/initr.js
andweb/javascript/initr.config.js
into one, temporary filetemp/core.js
. These are our core scripts to be loaded on every page of our website. This temporary file is then minified and copied toweb/javascript/min/core.js
. This is our production script file to rule them all. -
Every script in
web/javascript/
is then minified intoweb/javascript/min/
, excluding our core files above. This step is the big one for Initr to run its best in production. We have replicated our script file structure minified. Now when we kick off Initr with itsrootPath
set asjavascript/min/
, it will fetch minified versions of all your files. All you have to do is change your server configuration variable for development tofalse
for production. -
Last, our
temp/core.js
file is cleaned up (deleted).
Once you have updated this project with all of your code, be sure to update the values for author
in initr.sample.json
. The banner added to the top of your web/javascript/min/core.js
file uses the company value. You can remove this if you like by deleting uglify.core.options.banner
on line 35 in Gruntfile.js
.
Grunt can do a lot for your projects, be sure to read through their docs if you want more.