Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Getting Started with Gulp.js
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Casey Zumwalt
March 05, 2014
Technology
5
170
Getting Started with Gulp.js
Casey Zumwalt
March 05, 2014
Tweet
Share
Other Decks in Technology
See All in Technology
What happened to RubyGems and what can we learn?
mikemcquaid
0
300
Data Hubグループ 紹介資料
sansan33
PRO
0
2.7k
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
slsops
2
250
今日から始めるAmazon Bedrock AgentCore
har1101
4
410
CDK対応したAWS DevOps Agentを試そう_20260201
masakiokuda
1
290
超初心者からでも大丈夫!オープンソース半導体の楽しみ方〜今こそ!オレオレチップをつくろう〜
keropiyo
0
110
こんなところでも(地味に)活躍するImage Modeさんを知ってるかい?- Image Mode for OpenShift -
tsukaman
0
140
ZOZOにおけるAI活用の現在 ~開発組織全体での取り組みと試行錯誤~
zozotech
PRO
5
5.5k
Context Engineeringが企業で不可欠になる理由
hirosatogamo
PRO
3
590
顧客の言葉を、そのまま信じない勇気
yamatai1212
1
350
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3.9k
20260204_Midosuji_Tech
takuyay0ne
1
160
Featured
See All Featured
30 Presentation Tips
portentint
PRO
1
220
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
96
New Earth Scene 8
popppiees
1
1.5k
Site-Speed That Sticks
csswizardry
13
1.1k
The Curse of the Amulet
leimatthew05
1
8.6k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1.1k
Typedesign – Prime Four
hannesfritz
42
2.9k
How Software Deployment tools have changed in the past 20 years
geshan
0
32k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
110
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
320
[SF Ruby Conf 2025] Rails X
palkan
1
750
Documentation Writing (for coders)
carmenintech
77
5.3k
Transcript
Getting Started with Gulp.js
Install Node.js 1 nodejs.org
Get to know the command line. 2 ➜ npm -v
Install Gulp globally 3 ➜ sudo npm install -g gulp
Install Gulp globally 3 ➜ gulp -v
Install Gulp locally 4 ➜ cd ~/Casey/Sites/project
Install Gulp locally 4 ➜ project npm init npm init
creates a package.json file in our project directory.
Install Gulp locally 4 ➜ project npm install --save-dev gulp
—save-dev instructs npm to add the dependence to the package.json file we created earlier.
Setting up our Gulpfile 5 WHAT WE NEED GULP TO
DO Lint and concatenate our JavaScript Compile our Sass files Minify and rename everything Reload our browser after each change
Setting up our Gulpfile 5 ➜ project npm install gulp-jshint
gulp-sass gulp-concat gulp-uglify gulp-rename gulp-livereload --save-dev
gulpfile.js // Include gulp var gulp = require('gulp'), ! //
Include Our Plugins jshint = require('gulp-jshint’), sass = require(‘gulp-sass'), concat = require(‘gulp-concat’), uglify = require(‘gulp-uglify'), rename = require(‘gulp-rename’); livereload = require(‘gulp-livereload'); Set up Gulp includes
gulpfile.js // Lint Task gulp.task('lint', function() { return gulp.src('js/*.js') .pipe(jshint())
.pipe(jshint.reporter('default')); }); Set up the Lint task
gulpfile.js // Compile Our Sass gulp.task('sass', function() { return gulp.src('scss/*.scss')
.pipe(sass()) .pipe(gulp.dest('css')); }); Set up the Sass task
gulpfile.js // Concatenate & Minify JS gulp.task('scripts', function() { return
gulp.src('js/*.js') .pipe(concat('main.js')) .pipe(gulp.dest('js')) .pipe(rename('main.min.js')) .pipe(uglify()) .pipe(gulp.dest('js')); }); Concatenate and Minify the JS
gulpfile.js gulp.task('watch', function() { server.listen(35729, function (err) { if (err)
{ return console.log(err) }; ! // Watch .scss files gulp.watch('scss/**/*.scss', ['sass']); ! // Watch .js files gulp.watch('js/**/*.js', ['scripts']); ! }); }); Watch the files and reload the browser when changed
Watch our files for changes 6 ➜ project gulp watch
Add more plugins. 7
Profit. 8