Complete workflow for minifying and concatenating (angular) web applications using gulp
It looks like 99% of all tutorials on using gulp.js and the correct workflow only show the part where the js / css files (for example) have been minified and merged.
But what I didn't find is what needs to be done to get the correct file index.html
with the new processed files correctly listed inside, without having to manually edit the file.
Example index.html
:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
[...]
<script src="javascript/angular.min.js"></script>
<script src="javascript/angular-animate.min.js"></script>
<script src="javascript/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="javascript/app/app.js"></script>
<script src="javascript/app/controllers/controller.js"></script>
<script src="javascript/app/services/factory.js"></script>
</body>
And the result should be something like this:
<head>
<link rel="stylesheet" href="css/combined.css">
</head>
<body>
[...]
<script src="javascript/combined.js"></script>
</body>
where inside the files combined.*
all the css / js files are concatenated , but only minified with gulp that don't end with *.min.js
or*.min.css
.
Gulp-usemin and gulp-useref are not good for them because they combine all the files inside the build block and after that you can minify the (combined) output (to minify the already changed files again - I don't want that).
How could this skipped last step look like to complete the workflow?
source to share
As it may not be a satisfactory answer / solution to my question as stated above, I ended up using a different approach that works as expected, well on the production side and will have advantages during development.
I always use unlimited vendor versions of the vendor (like AngularJS, jQuery, etc.) and then the HTML looks like this (with special comments for useref
):
<head>
<!-- build:css css/styles.css -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<!-- endbuild -->
</head>
<body>
[...]
<!-- build:js js/scripts.js -->
<script src="javascript/angular.js"></script>
<script src="javascript/angular-animate.js"></script>
<script src="javascript/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="javascript/app/app.js"></script>
<script src="javascript/app/controllers/controller.js"></script>
<script src="javascript/app/services/factory.js"></script>
<!-- endbuild -->
</body>
gulpfile.js
:
var gulp = require('gulp'),
useref = require('gulp-useref'),
gulpif = require('gulp-if'),
uglify = require('gulp-uglify'),
cleanCSS = require('gulp-clean-css'),
rev = require('gulp-rev'),
revReplace = require('gulp-rev-replace');
gulp.task('default', ['combineminify']);
gulp.task('combineminify', function () {
return gulp.src('index.html')
.pipe(useref())
.pipe(gulpif('*.js', uglify({
preserveComments: 'license'
})))
.pipe(gulpif('*.css', cleanCSS({
keepSpecialComments: '*'
})))
.pipe(gulpif('*.js', rev()))
.pipe(gulpif('*.css', rev()))
.pipe(revReplace())
.pipe(gulp.dest('/path/to/destination/folder/'));
});
This gulp script creates a new index.html
file in the destination folder :
<head>
<link rel="stylesheet" href="css/styles-1627b7eb0c.css">
</head>
<body>
[...]
<script src="js/scripts-595ed88b32.js"></script>
</body>
And the folders ./css
and ./js
are expected to create the expected two cleaned up and minifiles *.css
and *.js
(with the computed string attached to the filename to avoid caching issues in some browsers).
source to share
Try gulp-html-replace wrapping your scripts or css:
<!-- build:test-js -->
stuff to be replaced
<!-- endbuild -->
In your gulpfile:
.pipe(htmlreplace({
'test-js': 'myfile.min.js'
}))
source to share