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
150
Getting Started with Gulp.js
Casey Zumwalt
March 05, 2014
Tweet
Share
Other Decks in Technology
See All in Technology
JEP 480: Structured Concurrency
aya_ebata
0
130
サーバー管理しないサーバーサービスManaged DevOps Pool
kkamegawa
0
130
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
250
『GRANBLUE FANTASY Relink』キャラクターの魅力を支えるリグ・シミュレーション制作事例
cygames
0
120
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
310
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
200
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
不動産tech Product Night#2_AIことはじめ_GA橋本
takehikohashimoto
0
190
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
240
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
140
あなたの知らないiOS開発の世界
recruitengineers
PRO
3
180
Google CloudのLLM活用の選択肢を広げるVertex AIのパートナーモデル
nayuts
0
130
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Facilitating Awesome Meetings
lara
49
5.9k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Code Review Best Practice
trishagee
62
16k
How to Ace a Technical Interview
jacobian
274
23k
GraphQLとの向き合い方2022年版
quramy
43
13k
Docker and Python
trallard
39
3k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
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