The article details how to install Gulp on a computer and create a Node.js project with a configured task.
About Gulp
Gulp is a command-line task runner built on Node.js and npm. It allows you to automate the time-consuming and repetitive tasks involved in web development.
Gulp is a node-streams-based build tool. These streams make it possible to connect file operations via pipelines. Gulp reads the file system and pipes data between single-purpose plugins via the .pipe() operator, performing one task at a time.
How to Install Gulp
Ensure you have Node.js, npm, and npx installed. To test it, use the following CLI commands:
node --version
npm --version
npx --versionIf they are not already installed, go here for instructions.
Check if Gulp is installed:
gulp --versionIf not, install it:
npm install --global gulp-cliSoon, Gulp is installed and you can see information about it on the screen:
How to Create Node.js Project with Gulp File
Execute the CLI command to create a project directory:
npx mkdirp gulp-app
Initialize the project package file:
npm initAnswer the questions during installation process and the file package.json created.
Now, install the gulp package’s dependencies:
npm install --save-dev gulpAs a first step, we’ll include the Gulp utilities plugin to create a runnable task that clearly indicates when it was completed.
npm install --save-dev gulp-utilYou can install several plugins at once:
npm i -D gulp-sass node sass gulp-autoprefixer gulp-cssnano gulp-concat gulp-uglify gulp-rename gulp-imagemin gulp-clean browser-syncIt will install the plugins locally in your project:
- gulp-sass and node sass: transform Sass into CSS
- gulp-autoprefixer: adds vendor prefixes to CSS rules
- gulp-cssnano: minifies CSS
- gulp-concat: merges several CSS or several JS files
- gulp-uglify: minifies JS
- gulp-rename: adds .min to the name of a minified file
- gulp-imagemin: minifies images
- gulp-clean: clears the build directory and deletes everything in it
- browser-sync: provides you with a simple web server and auto-reloads the page in all browsers on all devices
Make the first task and save it as a file named gulpfile.js:
var gulp = require('gulp'),
gutil = require('gulp-util');
gulp.task('default', function() {
return gutil.log('First task is running!')
});Run the task by running the command:
gulp firstTaskThere is a possibility that you will be denied access to run the script due to system policy. Run the following command to resolve this issue:
Set-ExecutionPolicy -Scope LocalMachine UnrestrictedRun the command gulp firstTask again. You expect to see this result:
Was this helpful?
0 / 0