Gulp Setup - Progressive Web App Training

Key Takeaways

hi there I'm Sam Dutton and I have a question for you are you still doing builds by hand if so let me show you an easier way modern web development involves quite a few tasks running servers optimizing images and processing source code now these are the kinds of manual tasks that you can automate with gulp grunt make or other build tools the world of build tools is constantly changing but we chose gulp here for its relative longevity and its relative simplicity simply put gulp reads a file called the gulp file to tell it what to do it then processes your source files transforms them and writes the results to a build directory this is a sample golf rjs file it's written in JavaScript with a couple of no js' extensions for loading other files the require statements of the top load the core gulp commands and the gulp interface to uglify these are known as gulp plugins and by the way uglify is a program to compress and minify javascript now gulp files are divided into a series of tasks a task might run a server minify some code or even delete files each task should be one self-contained action we define a task named uglify j/s and write some JavaScript to implement it the gulp dots sauce task reads all the J's files from source J s we then pass all those files into the uglify tool using the pipe command now the output of each command is ready to pipe into the next so we use the gulp nest command to write the result into new files under dist J s snap formerly gulp is a cross-platform streaming task runner that lets developers automate many development tasks at a high level gulp reads files as streams and pipes the streams to different tasks these tasks are code based and use plugins the tasks modify the files building source files into production files to get an idea of what gulp can do check the list of gulp recipes on github gulp is an ode package and the plugins that it uses are also node packages so you need to install node.js first this also installs the node package manager and you should also enable gulp from the command-line and to do this install the gulp CLI package you can then go into your project or create a new one and have NPM install the gulp plugins you need into your project right your gulp file j/s and you can begin using gulp from the command-line here's an example of creating a project and installing gulp plugins the first line creates a new NPM project this generates a package JSON file that lists your project's plugins the following commands install various example plugins including gulp itself the save dev flag updates the package JSON file with the corresponding plug-in the plugins are installed in a node modules directory with this method you can easily reinstall all plugins and their dependencies later by using the package JSON file rather than reinstalling each plug-in individually now note that plugins a B and C a imaginary we're just using those names to show how plugins work once the plugins are installed they need to be loaded into the gulp file using require now you're ready to define tasks this task is named task ABC it takes file from the some sources files path and pipes and through functions from each of the plugins which modify the files the processed files are passed to gulp tests which writes the files to some destination path the task we just defined can be run from the command line by typing gulp space and the task name in this case it's gulp space task ABC here's a set of links for learning more about gulp ins we've also built a code lab that takes you through common tasks follow the link to get to the lab now don't worry if you've missed any details just look at the gulp documentation and our to find out more we supply gulp files with our code labs so you'll be all set for now let's get back to writing PWA s and i'll see you soon [Music]