1. Angular Workflow with
Gulp.js
Cihad Horuzoğlu

2. Cihad Horuzoğlu
Front-end & Mobile Developer @ CicekSepeti.com
@cihadhoruzoglu
http://cihadhoruzoglu.com

3. Think your Work Flow

4. Work Flow
Develop Build
● Non minified
● Seperated files
● Test configuration
● Compiling
● Test code
● Watchers
● Live reload
● Linting
● Minified
● Merged files
● Live configuration
● Compiled
● Renamed
● Optimize performance
● Deployment
Setup
● Download dependencies
● Download framework
● Download libraries

5. Don’t do it manually,
Automate it!

7. Use front-end tools

9. What is the difference
between Grunt & Gulp ?

10. Gulp vs Grunt
Gulp
● Code over configuration
● Easy to read & use
● Based on streams
Grunt
● Configuration over code
● Hard to read
● Based on files

11. How these works?

12. Grunt
Gulp Much faster

13. The streaming build
system

15. Sample Stream
gulp.src('app/js/main.js')
.pipe(jshint())
.pipe(uglify())
.pipe(concat())
.pipe(gulp.dest('build'))

16. Getting started with Gulp

17. Install gulp Create
gulpfile.js
Install
dependent
packages
Write tasks to
your gulp file
Run your gulp
tasks
Using gulp

18. Install Gulp
Globally Install
$ npm install -g gulp
Install as a dependency to your project
$ npm install gulp --save-dev

19. Create gulpfile.js
var gulp = require(gulp);
gulp.task('default', function() {
// place code for your default task here
});

20. Run via Terminal
$ gulp (runs default task)
$ gulp minify concat (runs multiple task)
$ gulp watch (runs watch task)

21. Gulp API

22. gulp.task(name[, deps], fn)
gulp.task('js', function() {
gulp.src('app/js/main.js')
.pipe(uglify())
.pipe(concat())
.pipe(gulp.dest('build'))
});
Registers a task name with
a function

23. gulp.src(globs[, options])
gulp.src('app/css/*.less')
.pipe(less())
.pipe(concat('main.css'))
.pipe(gulp.dest('public/css))
Takes a file system glob
and starts emitting files that
match.

24. gulp.dest(path[, options])
gulp.src('app/index.html')
.pipe(gulp.dest('public/html')) Piped files are written to the
file system

25. gulp.watch(glob[, opts], tasks)
gulp.task('watch', function() {
gulp.watch(['./js/**/*.js'], ['js']);
});
Run a function when glob
change

26. That’s it.
Gulp has just 4 function.

27. Let’s discover some plugins

28. Common Gulp Plugins
$ npm install
● gulp-minify-css
● gulp-uglify
● gulp-concat
● gulp-ng-annotate
● gulp-ngdocs
● gulp-ng-html2js

29. gulp-minify-css
var minifyCSS = require('gulp-minify-css');
gulp.task('minify-css', function() {
gulp.src('./static/css/*.css')
.pipe(minifyCSS({keepBreaks: true}))
.pipe(gulp.dest('./dist/'))
});

30. gulp-uglify
var uglify = require('gulp-uglify');
gulp.task('compress', function() {
gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('./dist/'))
});

31. gulp-concat
var concat = require('gulp-concat');
gulp.task('scripts', function() {
gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'))
});

32. What about Angular
plugins ?

33. gulp-ng-annotate
var ngAnnotate = require('gulp-ng-annotate');
gulp.task('default', function () {
gulp.src('src/app.js')
.pipe(ngAnnotate())
.pipe(gulp.dest('dist'));
});

34. gulp-ng-docs
var gulpDocs = require('gulp-ngdocs');
gulp.task('ngdocs', function () {
gulp.src('path/to/src/*.js')
.pipe(gulpDocs.process())
.pipe(gulp.dest('./docs'));
});

35. gulp-nghtml2js
var ngHtml2Js = require("gulp-ng-html2js");
gulp.task("./partials/*.html")
.pipe(ngHtml2Js({
moduleName: "MyAwesomePartials",
prefix: "/partials"
}))
.pipe(gulp.dest("./dist/partials"));

36. Demo Time

37. Questions

38. Thanks.
Follow us
@cihadhoruzoglu
@techciceksepeti