If you're curious about the difference between gulp and grunt, I can break it down for you.
How do I integrate them into my index.html file?
In your HTML file, you can include JavaScript and CSS files. By using bower to specify which files should be compiled together into a destination file, you can streamline the process.
For example:
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/angular-material/angular-material.css" />
<link rel="stylesheet" href="/bower_components/angular-ui-router-anim-in-out/css/anim-in-out.css" />
<link rel="stylesheet" href="/bower_components/video.js/dist/video-js.css" />
<link rel="stylesheet" href="/bower_components/angular-tooltips/dist/angular-tooltips.min.css" />
<link rel="stylesheet" href="/bower_components/nvd3/build/nv.d3.css" />
<!-- endbower -->
<!-- endbuild -->
By running the gulp script, the above CSS files will be compiled into vendor.css. You can also enable options for uglification and minification in the gulp script.
Similarly, you can handle JS files in the same way. This is how the processes of uglification and minification are carried out.
gulp.src('app/*.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.minifyCss({
compatibility: '*'
})))
After applying uglification/minification, your index.html will look like this:
<link rel="stylesheet" href="/styles/vendors.css" />
How do I transition from development to production?
You can maintain nested JSON files with separate elements for dev, prod, and local environments. Customize settings in these files and use them within gulp during project compilation.
{
"dev": {
//required keys
},
"prod" :{
//required keys
}
What should the folder structure of my website look like? Should non-uglified files still be included?
Your website's folder structure can include:
- app
- scripts
- styles
- fonts
- index.html
- bower.json
- gulpfile.js