Gulp 4.0, the next version of Gulp, should be released any day now and it will make some parts of the workflow easier to manage. This section is not a comprehensive guide to Gulp 4 and the changes it brings in. It’s meant to get the file we’ve worked in on previous sections working against Gulp 4 mostly because it allows me to run serial tasks. > Gulp 4.0 is alpha software. It’s still under development and the APIs we discuss here may change without notice. Use the code and examples below at your own risk. To get started with...
> The custom tasks use Gulp 3 syntax. You will have to change them to work with Gulp 4 After we’ve created the tasks we need for our project, we can define custom tasks to run one or more of these tasks. In the task below we run the targets in square brackets clean, copy, fonts and processImages in parallel when we call gulp prep. This example runs copy, fonts and processImages in parallel. Gulp will launch all the tasks at the same time and will let them take as long as they need before notifying you that it’s complete....
Serving content under development and watching for file changes It’s nice to publish to gh-pages when we want but to do so after every change we make to our code CSS, JS or HTML gets old really quickly. Instead we create two ways to serve content from a local web server The first one serves content from our app source directory, most likely after we’ve processed the files beyond transpilation from ES6 to Javascript and SASS to CSS. We also take care of watching for changes by specifying the following criteria and actions: - If an HTML page gets added...
Now for what, to me, is the most tedious part of the workflow… copying things around and doing housekeeping on the files I’m working with. This is easier now since I don’t have to create directories did that already or move things around only copy so we set up tasks to copy sets of files and clean up after ourselves. Copying things over Copying files ended up being stranger than I thought it would be. I could set up a big task that would copy everything every time I run it but I realized that such a task would be...
Vulcanize and Crisper are Polymer specific tasks that deal with the way web component works and make puns on the name Polymer too : Vulcanize will combine all elements in elements.html and produce a single file. This is the same as a concatenate task except that it understands Polymer way of doing things We run crisper in the vulcanized output to extract scripts so we comply with the Content Security Policyhttps://www.w3.org/TR/CSP2/ specification that bans all inline scripts as a way to make sure we’re not getting malicious code on our pages. See the inline scripts section of this HTML5 Rocks...
Performance is one of those areas where perception is just as important as reality, particularly in mobile environments where the browser is only part of the equation, you have to take into account how long will it take for the device to wake up, to initiate the wireless connection, and many other thins that are beyond our control as front-end developers. I used to think that this wasn’t important until I started looking at what the performance does to users perception and engagement with web content. The Akamai studyhttp://www.akamai.com/html/about/press/releases/2009/press091409.html released in 2009 concluded that: - 47% of people expect a...
Now that we’ve generated the CSS files form our SASS content there are a few things left to do. Autoprefixerhttps://github.com/postcss/autoprefixer takes care of one of the most tedious tasks in writing CSS: adding vendor prefixes. Daniel Glazman walks through the history of CSS vendor prefixeshttp://www.glazman.org/weblog/dotclear/index.php?post/2015/07/30/CSS-Vendor-Prefixes in his blog but the general idea is that vendor prefixes allowed browser and other user agent vendors to implement CSS features undergoing standardization without impacting any future work from the CSS working group. The problem is that, as the features became widely deployed, it became impossible to withdraw the prefixed features. Furthermore, when specifications...
Ever since I saw it for the first time I’ve been in love with SASShttp://sass-lang.com/. It’s a clever, elegant and powerful superset of CSS and CSS 3 that provides powerful programming features to create your styles. The original version of SASS was written in Ruby and it requires the Ruby ecosystem Ruby itself and the Rubygem dependency management system installed in your computer. The Ruby dependency may put a damper in your plans to use and enjoy SASS particularly in Windows so the folks who created SASS have implemented a C version and called it libSASS. LibSASS is not as...
Transpilation allow us to use features of an input language into another. Recently Javascript has become a favorite target for Transpilers. The languages I’ve chosen to add are: ES6http://www.ecma-international.org/ecma-262/6.0/ through Babelhttp://babeljs.io/: ES6/ES2015 is the current specification for Ecmascript / Javascript standard. Because it is not evenly supported we still need to transpile it into ES5 which is better supported on browsers today. The ES6/Babel transpilation requires both gulp-babel and babel-preset-es2015. Install them with the following command: npm install --save dev gulp-babel babel-preset-es2015 The task looks like this: // Transpiles ES6 to ES5 using Babel gulp.task'babel', function { return gulp.src'app/es6//.js' .pipe$.sourcemaps.init...
In the next sections we’ll go through a gulpfile I use to work with my athena-shell project. The directory structure for the project is like this: js . ├── app │ ├── bowercomponents | ├── coffee │ ├── css │ ├── elements │ ├── es6 │ ├── images │ ├── js │ ├── scss │ └── styles ├── bowercomponents ├── dist └── nodemodules The app directory is our source, as you can see it has more directories than those in the dist destination directory. We have different sources for Javascript transpilation and CSS transformation. Most of the sources will end...
