Building Angular Project with Gulp

There are scenarios wherein we have to automate certain manual process and let mind concentrate on actual tasks. Building Angular project and putting build in a deployment folder is one of the activity. After working through scenarios like this I wrote an gulp file to perform this repetitive task for me. Setting gulp mode is possible, however this would trigger build process every time the code is saved

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>var gulp = require("gulp");<br>
var exec = require('child_process').exec;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>gulp.task('build', function (cb) {<br>
    process.chdir('work_folder/client/');<br>
    exec('ng build',{maxBuffer: 1024 * 1000}, function (err, stdout, stderr) {<br>
    &nbsp;&nbsp;&nbsp;&nbsp;console.log(stdout);<br>
    &nbsp;&nbsp;&nbsp;&nbsp;console.log(stderr);<br>
    &nbsp;&nbsp;&nbsp;&nbsp;cb(err);<br>
        console.log("Build completed……");<br>
        gulp.start('movefolder');<br>
    &nbsp;&nbsp;});<br>
});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>gulp.task('movefolder', function(){<br>
    process.chdir(process.env.INIT_CWD);<br>
    gulp.src("work_folder/client/dist/*<em>/</em>")<br>
    .pipe(gulp.dest('work_folder/public/'));<br>
});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>

Running gulp builds and moves dist files to required folder. As build Angular build process varies in time moving dist to separate folder is a separate gulp task.

Hope this helps