To allow a simple edit of HTML fragments to be injected into a template that dictates what elements are used and what order they are placed in.
After you have made sure you installed all the gulp packages, you can type the name of a task like gulp html-build
or just gulp
to build/optimize the whole thing.
html-build
goes to./src/templates/
and looks for html files in that folder. Then the inject method is used to look in the sample filetemplate.html
for injection points. once it identifies that, it looks in the/fragments
folder for the appropriate file.
This seeks the inject that includes "meta" and resolves it to ./src/templates/fragments/meta.html
:
.pipe(inject(gulp.src(['./src/templates/fragments/meta.html']), {starttag: '<!-- inject:meta:{{ext}} -->',transform: function (filePath, file) { return file.contents.toString('utf8')} }))
This is the template.html
placeholder for the injection of that above snippet:
<!-- inject:meta:html -->
<!-- global meta tags will be here -->
<!-- endinject -->
html-clean
goes in the compiled html files that were output byhtml-build
adds blank alt tags where there were none, strips whitespace and minifies it. It will be smaller but unreadable to humans.css-build
grabs all the css in./src/css/
combines (concatinate) it to one file calledglobal.css
and dumps it in./dist/css/
css-clean
lookes in the compiled css, makes it shorthand by way ofgulp-csso
, then usesgulp-uncss
to look for unused CSS in all your html docs (does not work for elements created in the DOM by JS), finally it minifies it.js-build
grabs all the javascript in./src/js/
combines (concatinate) it to one file calledglobal.js
and dumps it in./dist/js/
.js-clean
lookes in the compiled js, then minifies it.gulp
by itself runs the builds, followed by the cleans.
You need to go to the root of the project and in the command line you'll use npm to install these packages, assuming you don't have gulp already, here it is installedd globally:
npm install gulp -g
npm install gulp-if gulp-cheerio gulp-sass gulp-rename gulp-util vinyl-source-stream vinyl-buffer
npm install --save gulp-concat gulp-uglifycss gulp-uglifyjs
npm install --save-dev gulp-plumber gulp-inject gulp-uglify gulp-uncss gulp-csso gulp-htmlclean gulp-dev gulp-filter gulp-useref gulp-rev-replace gulp-browserify
npm update