Tag Archives: gulp

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