This application demonstrates how to give production build using gulp in multiple ways.
npm installnpm install gulp -gThis application demonstrates two kinds of builds
npm run build-prodAfter running the above command, the production build will be placed in dist folder.
In this build, all the HTML files included using templateUrl and CSS files included using styleUrls will be copied into production build folder(dist). The final build file structure is shown below. Here we have to maintain the same folder structure as in development.
You can also combine all the component CSS files into a single bundle as shown in below gulp task.
gulp.task('bundle-component-css', () => {
return gulp.src('src/app/**/*.css')
.pipe(concat('bundlecss.css'))
.pipe(rename({
suffix: '.min'
}))
.pipe(cssMinify())
.pipe(gulp.dest('dist/src/css/'))
});npm run build-prod-inlineAfter running the above command, the production build will be placed in dist folder.
In this build, all the HTML pages included using templateUrl and CSS files included using styleUrls will be loaded into the JS file as templates. This way the application will load the HTML, CSS much faster and the total number of request made will be less. The final build file structure is shown below.
It really depends on the developer to choose the appropriate build based on their requirement. In the first scenario, replacing the CSS and HTML in production server would be much easier. In the second scenario, you have to run the gulp task and then replace appropriate files.