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
170
Getting Started with Gulp.js
Casey Zumwalt
March 05, 2014
Tweet
Share
Other Decks in Technology
See All in Technology
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
220
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
マルチエージェントのチームビルディング_2025-10-25
shinoyamada
0
200
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
11k
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
210
re:Inventに行くまでにやっておきたいこと
nagisa53
0
620
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
450
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
280
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
650
abema-trace-sampling-observability-cost-optimization
tetsuya28
0
290
Dify on AWS 環境構築手順
yosse95ai
0
150
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
180
Featured
See All Featured
A Tale of Four Properties
chriscoyier
161
23k
Faster Mobile Websites
deanohume
310
31k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Being A Developer After 40
akosma
91
590k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
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