This document summarizes a company's journey to build a static site generator called Estático using Gulp. It details issues they encountered such as communicating changes across teams, automating frontend tasks, and differences between development environments. It explains design decisions like using Gulp for its modular task structure and JavaScript basis. Continuous integration, open sourcing, and maintaining open source projects are also addressed. The overall goal was to automate workflows and enable easy setup of new projects.
11. Issue #2:
Automating frontend routines
Working with templates and partials
Generating CSS (preprocessing SCSS, autoprefixing,
minifying)
Generating JavaScript (dependency resolving,
concatenating, minifying, linting, unit testing, customized
builds of libraries)
Icons and images handling
Watching for changes and livereloading
20. More automation:
Scaffolding
Module create task:
prompts for a module's name
creates module's files
registers module's CSS and JS
Scaffolding tasks have a nice
command line interface
21. More automation:
Handling data in a project
Data has to be separate from templates
Templating engine (Handlebars) and JSON solve that
problem
31. Example 1:
Missing dependencies
✖ Error: pngquant failed to build, make
sure that libpng-dev is installed
✖ Error: /lib/x86_64-linux-gnu/libc.so.6:
version `GLIBC_2.14' not found
32. Example 2:
Different implementations (SVG to PNG)
1. Use PhantomJS
2. Discover problem on Windows:
Cannot start phantomjs: Phantom didn't
respond within 30 seconds)
3. Use GraphicsMagick
4. Discover problem on OS X: vs.
5. Use PhantomJS on Unix and GraphicsMagick on Windows
6. Discover new problem on Windows
7. Go back to 1.
33. Solution:
Specify runtime and make it
available
1. Specify software versions
2. Select your linux flavor
3. Create box (or image)
4. $ vagrant up && vagrant ssh
34. Problem 3:
npm install ≠ npm install
npm packages are specified using SemVer
Works fine in theory, doesn't work as fine in practice
39. When to publish
Just get over yourself!
Code will never be perfect
Publish anyway
Improve continuously
40. How to deal with licensing
Set up contributor license agreement (CLA) workflow
http://choosealicense.com
Not an actor
41. How to maintain
Schedule time to take care of contributions
Define responsibilities
Contribute back to other OSS software (report bugs,
suggest features, …) ❤
46. Contact
Thomas Jaggi, –thomas.jaggi@unic.com @backflip
Olga Skurativska, –olga.skurativska@unic.com @_olko
Interested in working with us?
https://www.unic.com/de/about/career/jobs/development/senio
frontend-engineer-15-08-18.html