This project is an example of workflow management using Gulp.js, Git, and Browserify
Run > npm install --only=development
Run > gulp
This will start up a web server at http://localhost:8080 and begin watching for changes on html, json, coffeescript, javascript, sass, and image files.
The following node modules are dependencies for this project:
gulp: used for task automation and managing the workflow When starting up gulp, the default gulp workflow task is set to watch for changes to the following:
###HTML files: 'Builds/development/*.html'
- Will reload the webserver page when html is modified
- In a production environment, changes to html files will cause them to be minified and saved to the production directory
###JSON files: 'Builds/development/js/*.json'
- Will reload the webserver page when json is modified
- In a production environment, changes to the json files will crush them and store them to their production directory
###Coffeescript files:
- Runs the coffee task which grabs the files from 'components/coffee/*.coffee', compiles them, and saves them to the 'components/scripts' directory
###Javascript files:
- Runs the js task which grabs the files from 'components/scripts', concatenates them into a single script.js file, minifies the js (if running in a production environment), stores the script.js file in the appropriate js output directory (production/js or development/js depending on the environment), then reloads the webserver page
###SASS files:
- Runs the compass task which grabs the 'components/sass/style.scss' file and compiles it. It saves to 'development/css/style.css' in nested format style. In the production environment, the file is formatted to a compressed style and saved to 'production/css/style.css'
###Image files:
- When working in a production environment, images within subdirectories of the 'development/images' directory will be optimized upon modification and saved to the 'production/images' folder, then the webserver page will be reloaded
- Used for validation of SASS, run
> gulp sassLint
Modify the environment variable within gulpfile.js to specify whether or not you want to use the process.env.NODE_ENV
variable or manually set it to development
or production
. Setting the environment to production will produce minified, compressed, and optimized versions of your scripts, css, and images.