20 Cool Things You Can Do With Gulp
What is Gulp?
- Tool for building javascript applications
- Front end build system
- Built on NodeJS
Common Gulp tasks
- get rid of whitespaces in scripts therefore save space
- concatenate files therefore save space
- let browser know if there's a new version of a cached file
- testing linting optimization
- also a web server plugin to run code on a development server
How Gulp exactly works
- built on Node streams
- streams - flow of data that can be manipulated asynchronously
- files are linked through pipelines - the pipe() operator
- output of one file is the input of another - run task after task maybe linking different plugins for example
- the files are not affected until all the plugins had been processed
- Gulp is based on streams and javascript code
Configuring Gulp
1) Install Gulp globally - access to it anywhere on your system
npm install -g gulp
2) Create the directory for your project
mkdir exampleProject
3) cd into the directory and open it up in Atom (the coding text editor)
cd exampleProject
atom .
4) Create a package.json file which will hold all metadata for our server
npm init
5) install gulp locally in our project folder as a development dependency, a node_modules folder is automatically created- local modules
npm install --save-dev gulp
6) Create directory named src to store our application source code, this source code will then get compiled and the compiled version used in the Build/Public directory - basically the viewable used version of our code
mkdir src
7) Create the only file needed for Gulp - gulpfile.js - that's where we describe everything we are going to do with Gulp
touch gulpfile.js
8) Contents of gulpfile.js
const gulp = require('gulp');
9) 4 Gulp top level functions
gulp.task = define tasks
gulp.src = point to the files to use
gulp.dest = points to the folder to output
gulp.watch = watch files and folders for changes
10) Expanding the gulpfile.js with more functionality
10.1) Log a message
gulp.task('message', function(){
return console.log("Gulp is running..");
});
11) Running gulp with the specified task name
in the console: gulp message
Gulp will show it started and finished the task, including the output.
If you don't want to run a task with a specific name, you can enter 'default' in the task name placeholder, and then just type gulp. That function will be run.
12) Create a task to copy HTML files
Create 2 HTML files, index.html and about.html
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First App</title>
</head>
<body>
<h1>Welcome to my website</h1>
</body>
</html>
About.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First App</title>
</head>
<body>
<h1>About this website</h1>
</body>
</html>
Copy those files to the Public folder using a Gulp task
gulp.task('copyallhtml', function(){
gulp.src('src/*.html').pipe(gulp.dest('public'));
});
The Public folder = our production application, mostly files are copied there after being stripped of white spaces etc
UPCOMING: Optimizing uploaded images with Gulp
13) Optimizing uploaded images with Gulp
13.1) Get the plugin - gulp-imagemin
Link: https://www.npmjs.com/package/gulp-imagemin
Get in your project's directory, and npm install --save-dev gulp-imagemin
13.2) Include the imagemin npm module in the gulpfileconst imageMin = require('gulp-imagemin'); gulp;
13.3) type in gulp imagemin to call the task and we're done!
14) Optimizing our javascript code to save space on our server This functionality will get rid of white spaces and other clutter in your source code when being uploaded to the Public / production folder - our server. 14.1) Creating a testing file
Go into your src folder, mkdir js
touch file1.js
Also go into your public(or dist) where the destination for our optimized .js files will be
cd public
mkdir js
Write some code with unnecessary white space between it into file1.js
// console log
console.log("HO LEE FUUUK");
// another console console.log;
console.log("OH MA GEWDDDDDDDDD");
14.2) Get the gulp-uglify module in your project's directory
npm install --save-dev gulp-uglify
Reminder: --save-dev is the dependencies your package needs only for development purposes, not when installed on a different machine
14.3) Include the module in our gulpfile
const uglify = gulp.require('gulp-uglify');
14.4) Create the uglify gulp task in our gulpfile using the same code procedure as with every gulp task
gulp.task('optimizejs', () =>
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('public/js'))
);
14.5) Run it!
gulp optimizejs
15) Add gulp SASS
SASS = CSS precompiler - can use functions and nestings etc. in our css
SASS files use an .scss extension
15.1) Install the gulp SASS module for development
npm install --save-dev gulp-sass
15.1) Apply the module for compiling SASS in our gulpfile - the gulp task will create all the necessary folders! Also, with the sass() function, files will be compiled into css.
const sass = require('gulp-sass');
gulp.task('sass', () =>
gulp.src('src/sass/*scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/css'))
);
15.2) More setting up
In our src folder, create a folder named sass
in the sass folder, create style.scss file
in the style.scss file, set a variable
$bgColor: #cccccc;
body {
background: $bgColor;
}
15.3) Run the task!
gulp sass
Note - write into the index.html file, and then use the copyallhtml gulp task to copy it to the public folder!
16) Add a link to our index.html to link up our compiled stylesheet styles.css
<link rel="stylesheet" href="css/style.css" />
17) Include our optimized .js file into index.html
</body>
<script src="js/file1.js"></script>
Copy paste this to the about.html file
Use the copyallhtml gulp task to copy those to the public folder
18) Make all the gulp tasks run with one command
In the default gulp task, include an array of tasks we want to run
gulp.task('default',
['copyallhtml', 'imagemin', 'optimizejs', 'sass']
);
This will build our public(dist) folder!
19) Create gulp task to concatenate all .js files together
Get the gulp-concat plugin
npm install --save-dev gulp-concat
Create a file2.js in our src/js
file2.js:
console.log("THIS IF FILE TWOOOOOOO");
alert("OMG THIS IS FILE TWOOoOoOoOoOoOo");
Include gulp-concat in our gulpfile
const concat = require('gulp-concat');
Combine all .js files into a file main.js
Get rid of our .js optimizing task and incorporate it into the concat task
// combine all scripts
gulp.task('combinescripts', () =>
gulp.src('src/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'))
);
Run it! Just type in gulp
20) Monitor changes to files and call responding gulp tasks with gulp.watch
// monitor changes and apply proper tasks
gulp.task('watch', function(){
gulp.watch('src/*.html', ['copyallhtml']);
gulp.watch('src/images/*', ['imagemin']);
gulp.watch('src/sass/*.scss', ['sass']);
gulp.watch('src/js/*.js', ['combinescripts']);
});
then run gulp watch in the terminal and you will see it actively monitoring and running corresponding tasks.
Komentáře
Okomentovat