Setup GulpJS to Minify Javascript Files on Ubuntu 19.10
source link: https://www.vultr.com/docs/setup-gulpjs-to-minify-javascript-files-on-ubuntu-19-10
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Overview
GulpJS is a toolkit for automating tedious and repetitive tasks in your development environment. It can automate minification, obscuration, compiling, and more.
Prerequisites
First, set up a non-root user with sudo
privileges. Click Here for instructions.
Install build-essential
.
$ sudo apt-get install build-essential
Install curl
.
$ sudo apt-get install curl
Installation
NodeJS and NPM
Update and upgrade your local packages.
$ sudo apt-get update
$ sudo apt-get upgrade
Install the latest stable release of NodeJS.
$ curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
$ sudo apt-get install -y nodejs
Verify the installation is successful.
$ node -v && npm -v
v13.11.0
6.13.7
GulpJS CLI
Install the GulpJS CLI.
$ sudo npm install -g gulp-cli
Verify the installation is successful.
$ gulp -v
CLI version: 2.2.0
Setup
To use GulpJS with plugins you need a gulpfile.js
file and a package.json
file.
gulpfile.js
: configures, pipes and executes tasks along with plugin management.package.json
: keeps in track of dependencies and their versions.
Go to your project directory.
$ cd /path/to/project/
Initialize an NPM environment to create a package.json
:
$ npm init
When prompted for a package name, use gulpjs
. Press ENTER to accept the default response for all other questions. Afterward, you should see this summary.
About to write to /root/package.json:
{
"name": "gulpjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
Type yes
and press ENTER.
Install the local gulp
package and the gulp-uglify
plugin.
npm install --save-dev gulp gulp-uglify
Creating the gulp task
Create a gulpfile.js
in the root of the project.
nano gulpfile.js
Import the libraries, then, define a task. The example task is named exampleTask
.
const gulp = require('gulp'); // Import Gulp
const uglify = require('gulp-uglify'); // Import Gulp Uglify (Javascript minify)
gulp.task('exampleTask', ()=>{ // define a task
return gulp.src('/path/to/javascript/files/*.js') // source a directory full of anything ending with .js
.pipe(uglify()) // minify the stream
.pipe(gulp.dest('/path/to/destination/')); // send files to a destination
});
Make sure there is at least one javascript file in /path/to/javascript/files/
:
$ ls /path/to/javascript/files/
file.js
Run the task.
$ gulp exampleTask
Working directory changed to ~
Using gulpfile ~/gulpfile.js
Starting 'exampleTask'...
Finished 'exampleTask' after 59 ms
/path/to/destination/
contains the minified file.
$ ls /path/to/destination/
file.js
For more information about gulp-uglify
, see https://www.npmjs.com/package/gulp-uglify
Want to contribute?
You could earn up to $600 by adding new articles
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK