{"id":279119,"date":"2018-12-14T08:59:17","date_gmt":"2018-12-14T15:59:17","guid":{"rendered":"http:\/\/css-tricks.com\/?p=279119"},"modified":"2018-12-15T07:00:34","modified_gmt":"2018-12-15T14:00:34","slug":"annotated-build-processes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/annotated-build-processes\/","title":{"rendered":"Annotated Build Processes"},"content":{"rendered":"<p>When you&#8217;re putting together a build process for a site, it&#8217;s so dang useful to look at other people&#8217;s processes. I ran across Andrew Welch&#8217;s <a href=\"https:\/\/nystudio107.com\/blog\/an-annotated-webpack-4-config-for-frontend-web-development\" rel=\"noopener\">&#8220;An Annotated webpack 4 Config for Frontend Web Development&#8221;<\/a> the other day and was glad he blogged it. If I was kicking off a new site where I wanted a webpack build, then I&#8217;d almost certainly reference something like this rather than start from scratch. At the same time, it made me realize how build processes all have such <em>different<\/em> needs and how unique those needs are now from even a few years ago in the hay day of Grunt and Gulp build processes.<\/p>\n<p><!--more--><\/p>\n<p>I was looking around for an annotated Gulp reference file and came across another one of Andrew&#8217;s articles &mdash; <a href=\"https:\/\/nystudio107.com\/blog\/a-gulp-workflow-for-frontend-development-automation\" rel=\"noopener\">&#8220;A Gulp Workflow for Frontend Development Automation&#8221;<\/a> &mdash; from just one year earlier! Here&#8217;s a simplified list of what he was doing with Gulp (which he explains in more detail in the post):<\/p>\n<ul>\n<li>Compile Sass<\/li>\n<li>Run Autoprefixer<\/li>\n<li>Create Sourcemaps<\/li>\n<li>Minify<\/li>\n<li>Inject critical CSS and bits of scripts<\/li>\n<li>Run Babel<\/li>\n<li>Uglify<\/li>\n<li>Do style injection\/reloading<\/li>\n<li>Run accessibility audit<\/li>\n<li>Generate icon font<\/li>\n<li>Optimize images<\/li>\n<\/ul>\n<p class=\"explanation\">Speaking of Gulp and annotated build processes, I&#8217;m working on a CSS-Tricks redesign and, for various reasons, went with a Gulp build. Against my better judgment, I wrote it from scratch, and <a href=\"https:\/\/gist.github.com\/chriscoyier\/bfc8efd4886cb3abb2f9015a2eaaf164\" rel=\"noopener\">this is how far I&#8217;ve gotten<\/a>. It doesn&#8217;t feel particularly robust or efficient, so rewrites and suggestions are welcome! And speaking of Gulp, <a href=\"https:\/\/twitter.com\/ChrisFerdinandi\/status\/1067871758945001472\" rel=\"noopener\">here&#8217;s a recently-published boilerplate<\/a> I wish I had seen before starting.<\/p>\n<p>Now, a year later, here&#8217;s what the build process is being asked to do:<\/p>\n<ul>\n<li>Run differently-configured web servers<\/li>\n<li>Hot module replacement<\/li>\n<li>Dynamic code splitting<\/li>\n<li>Lazy loading<\/li>\n<li>Make modern and legacy code bundles<\/li>\n<li>Cache busting<\/li>\n<li>Create service worker<\/li>\n<li>Compile PostCSS<\/li>\n<li>Optimize images \/ create .webp<\/li>\n<li>Process .vue files<\/li>\n<li>Run Tailwind and PurgeCSS<\/li>\n<\/ul>\n<p>It&#8217;s funny how quickly things change. We&#8217;re still essentially asking for help compiling files and optimizing things, but the tools we use change, the code we write changes, the way we talk about development changes, the expectations of development changes, the best practices change&#8230; makes ya sweat. &#x1f605;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you&#8217;re putting together a build process for a site, it&#8217;s so dang useful to look at other people&#8217;s processes. I ran across Andrew Welch&#8217;s &#8220;An Annotated webpack 4 Config for Frontend Web Development&#8221; the other day and was glad he blogged it. If I was kicking off a new site where I wanted a [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":279433,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"The build processes they are a-changin'.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[579,841,680],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/annotated-build-tools.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":254853,"url":"https:\/\/css-tricks.com\/combine-webpack-gulp-4\/","url_meta":{"origin":279119,"position":0},"title":"Combine Webpack with Gulp 4","date":"May 15, 2017","format":false,"excerpt":"Webpack is so hot right now! Webpack is great when it comes to module bundling and working with frameworks like Vue or React, but it is a bit more awkward when handling static assets (like CSS). You might be more used to handling your static assets with something like Gulp,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/05\/webpackgulp.png?fit=1200%2C759&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":280462,"url":"https:\/\/css-tricks.com\/gulp-for-wordpress-creating-the-tasks\/","url_meta":{"origin":279119,"position":1},"title":"Gulp for WordPress: Creating the Tasks","date":"December 27, 2018","format":false,"excerpt":"This is the second post in a two-part series about creating a Gulp workflow for WordPress theme development. Part one focused on the initial installation, setup, and organization of Gulp in a WordPress theme project. This post goes deep into the tasks Gulp will run by breaking down what each\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/spilled-milk-wordpress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":286474,"url":"https:\/\/css-tricks.com\/moving-from-gulp-to-parcel\/","url_meta":{"origin":279119,"position":2},"title":"Moving from Gulp to Parcel","date":"April 25, 2019","format":false,"excerpt":"Ben Frain just made some notes about the switch from Gulp to Parcel, a relatively new \"web application bundler\" which, from a quick look at things, is similar to webpack but without all the hassle of setting things up. One of the things I\u2019ve always disliked about webpack is that\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/parcel.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":245524,"url":"https:\/\/css-tricks.com\/hashes-in-wordpress-assets-with-enqueue\/","url_meta":{"origin":279119,"position":3},"title":"Using Dynamic Hashes in File Names with WordPress&#8217; Enqueue Function","date":"September 14, 2016","format":false,"excerpt":"The following is a guest post by Pascal Klau, a self-described trainee web developer from Germany working with WordPress, Gulp, and more recently VueJS and Webpack. During my journey of learning web technology, I stumbled upon the importance of file caching. It's a pretty important thing for web page performance.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":207144,"url":"https:\/\/css-tricks.com\/gulp-for-beginners\/","url_meta":{"origin":279119,"position":4},"title":"Gulp for Beginners","date":"September 1, 2015","format":false,"excerpt":"Gulp is a tool that helps you out with several tasks when it comes to web development. It's often used to do front end tasks like: Spinning up a web server Reloading the browser automatically whenever a file is saved Using preprocessors like Sass or LESS Optimizing assets like CSS,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253478,"url":"https:\/\/css-tricks.com\/fabrica-dev-kit\/","url_meta":{"origin":279119,"position":5},"title":"Fabrica Dev Kit","date":"April 10, 2017","format":false,"excerpt":"Fabrica Dev Kit is a toolkit for WordPress development. You... Clone a GitHub Repo Configure your WordPress project (settings, plugins, etc) through a `.yml` file Run a Ruby setup script which Downloads dev dependencies (like Gulp) through npm or yarn Builds a Docker container and volumes to run everything inside\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/annotated-build-tools.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/279119"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=279119"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/279119\/revisions"}],"predecessor-version":[{"id":280214,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/279119\/revisions\/280214"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/279433"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=279119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=279119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=279119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}