That means that every time a developer had to modify a stylesheet and wanted to test it in a browser, he had to run
ant less..and wait 6 or 7 seconds. After that, he could refresh the page and see the results. It was the same thing if he had to modify a TypeScript file, add a new library or add a new icon.
##Then came Gulp
##Great plugins we use
Watch is integrated into Gulp and must be one of its greatest features. Watch allows to select files and monitor for changes. We can hook those changes to specific tasks, so modifications to LESS files will trigger LESS compilation automatically. Watch improves our productivity a lot!
Templates are now in
target/package/templates/templates.js and accessible with
As you may know, the Cloud Admin Web application is hosted on AWS S3. Since S3 is for static file serving and doesn’t allow on-the-fly compression, we need to gzip files before uploading them to S3. With gulp-gzip we simply pipe gzip() into our task’s stream and we have a compressed gzipped file.
This will output the gzipped
CoveoJsAdmin.js.gz file in
###Minify, concatenate and source maps
gulp-concat allows us to to combine all the files needed into a single file while gulp-uglify minifies (and uglifies!) our files to shrink them to a minimum weight. gulp-sourcemaps lets us know which code belongs to which file for easier debugging. gulp-if allows us to add conditions to tasks. We use a
--min flag to determine if we minify and gzip or not.
This will take all our libraries files (Backbone, JQuery, Underscore, etc) located in
/lib and bundle them into
CoveoJsAdmin.Dependencies.js. If the flag
--min is enabled when calling gulp, it will also minify and rename to
CoveoJsAdmin.Dependencies.min.jsand gzip the file to
CoveoJsAdmin.Dependencies.min.js.gz. The generated files will be output to
###Other notable plugins we use
- gulp-clean, to delete generated files and get a fresh start
- gulp-util, for easier logging in tasks and passing arguments via the CLI
- gulp-less, for those awesome stylesheets
- gulp-tsc, to compile our TypeScript
###What’s coming next
We’ll get there soon!