If you track your project with version control like git you’ll want to include the package.json and gulpfile.js, but do not track the node_modules directory. You may notice a new directory in your project folder named node_modules.
#CODEKIT VS GULP INSTALL#
If you were then to copy your package.json and gulpfile.js to new projects you would only need to run npm install to get up and running. npm install browser-sync gulp -save-devĪfter running all of those commands you can check out your package.json to see all of those packages included. npm install -save-dev gulp-concat browser-syncīrowser-sync lets you watch files for changes to reload the browser and inject CSS into the browser without a reload. The gulp-concat package will be used to concatenate JavaScript files into a single build file. npm install -save-dev gulp-babel on this package gulp-concat The gulp-babel packages gives the ability to write modern (ES6+) JavaScript and compile it into browser compatible JavaScript. The gulp-csso package lets you minify and optimize CSS. npm install node-sass gulp-sass -save-dev This package will allow compiling of SASS or SCSS into a CSS file.
Installing packagesīefore we can do cool stuff like automatically inject our CSS into the browser without reloading the page we need to add packages. If you run into issues getting Gulp installed on your system check out the guides available on Gulp.js. Sidebar: Troubleshooting Gulp Installation So we just need to create a gulpfile.js in the project then start adding tasks. A gulpfile is simply a JavaScript file in our project that we can configure our automations in. How we get gulp to do stuff is by creating a gulpfile. Now that we have gulp installed we need it to do stuff to automate our workflow. This format will get familiar as it’s how you save all your packages for development purposes. Once this is complete the first package we’ll want to save into our devDependencies is gulp itself.
#CODEKIT VS GULP SERIES#
This will take you through a series of prompts for giving your project a name, description, and more. The file is created by running the following command: This is where the packages your project depends on are stored. Once inside the desired directory in your terminal you’ll need to create a package.json file. Depending on where your files are located on your system that could be something like:Ĭd ~/sites/my-site/wp-content/themes/my-theme Using a WordPress theme as an example (though this workflow works just as well for plugins) you would want to navigate into your theme directory folder. Next, you’ll either need to navigate to a directory of an existing project or create a new directory. Open up your terminal and run npm install -global gulp-cli. Getting setup with Gulpįirst, you’ll need to install the gulp command line utility. nvm allows you to switch between versions of Node.js on your system which is very useful if you end up working on a legacy project with packages that haven’t been updated to work with the latest version of Node.js. If you’re getting Node.js installed now may be a good time to take a look at installing Node Version Manager ( nvm) as well. If you don’t have them installed go ahead and install Node.js and it should take care of it all. node -versionĮach of these commands should return something along the lines of 10.15.1 depending on the version you have. Pop open your terminal and run the following commands. If you’re not sure you have those installed it is easy enough to check. Installing Node.jsīefore getting Gulp installed you’ll need Node.js, npm, and npx installed. But you can do anything you’d like with vanilla JavaScript and Node modules inside your gulpfile which we’ll touch on in a bit.įirst we need to get Gulp installed. In addition to actions like compiling SASS, you can compile modern JavaScript into browser-compatible JavaScript with Babel, minify and concatenate files, run tests, refresh your browser when files are changed, and much more.Ī lot of these actions are performed by the large library of plugins available for Gulp. Gulp is a JavaScript based task-runner built on Node.js for automating development workflows. This is article is going to focus on using Gulp to handle the task-running and compiling of your development workflow. You have CodeKit for a more user focused interface, Webpack is the new hotness taking over the world, and Grunt is the old standard. If you’re looking to get started using SASS and modern JavaScript in your WordPress projects, be it theme or plugin, you’re going to need to something to handle the compiling.
0 kommentar(er)
