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
Casey Zumwalt
March 05, 2014
Technology
5
160
Getting Started with Gulp.js
Casey Zumwalt
March 05, 2014
Tweet
Share
Other Decks in Technology
See All in Technology
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
AIエージェントデザインパターンの選び方
almondo_event
0
140
ソフトウェアテストのAI活用_ver1.10
fumisuke
0
230
技術書典18結果報告
mutsumix
2
180
ProductZine Day 2025 Assuredのプロダクトディスカバリー
kechol
0
110
2025advance01
minamizaki
0
130
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
340
GoogleのAI Agent
shukob
0
120
Cloud Run を解剖して コンテナ監視を考える / Breaking Down Cloud Run to Rethink Container Monitoring
aoto
PRO
0
110
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.2k
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
140
CSS polyfill とその未来
ken7253
0
140
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
It's Worth the Effort
3n
184
28k
Balancing Empowerment & Direction
lara
1
84
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
620
Statistics for Hackers
jakevdp
799
220k
A better future with KSS
kneath
239
17k
Done Done
chrislema
184
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.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