Angular workflow with gulp.js
10 likes7,363 views
This document discusses using Gulp.js to automate Angular workflow tasks like building, testing, linting, minifying, and deploying. It provides an overview of Gulp and how it compares to Grunt, demonstrating how to set up a basic Gulpfile and tasks. Finally, it recommends several common Gulp plugins for Angular projects, such as gulp-ng-annotate and gulp-ng-html2js, and shows examples of using them.
![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](https://image.slidesharecdn.com/angularworkflowwithgulp-141129042647-conversion-gate01/85/Angular-workflow-with-gulp-js-22-320.jpg)
![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.](https://image.slidesharecdn.com/angularworkflowwithgulp-141129042647-conversion-gate01/85/Angular-workflow-with-gulp-js-23-320.jpg)
![gulp.dest(path[, options])
gulp.src('app/index.html')
.pipe(gulp.dest('public/html')) Piped files are written to the
file system](https://image.slidesharecdn.com/angularworkflowwithgulp-141129042647-conversion-gate01/85/Angular-workflow-with-gulp-js-24-320.jpg)
![gulp.watch(glob[, opts], tasks)
gulp.task('watch', function() {
gulp.watch(['./js/**/*.js'], ['js']);
});
Run a function when glob
change](https://image.slidesharecdn.com/angularworkflowwithgulp-141129042647-conversion-gate01/85/Angular-workflow-with-gulp-js-25-320.jpg)
Angular workflow with gulp.js
- 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!
- 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