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
140
Getting Started with Gulp.js
Casey Zumwalt
March 05, 2014
Tweet
Share
Other Decks in Technology
See All in Technology
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
1
180
社内勉強会運営のコツ
senoo
6
1.1k
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
640
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
320
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
2.5k
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
2
2.9k
Terraformあれやこれ/terraform-this-and-that
emiki
4
460
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
転移学習とドメイン適応の基礎
kmatsui
2
570
PHPカンファレンス小田原2024
ysknsid25
3
660
自動生成を活用した、運用保守コストを抑える Error/Alert/Runbook の一元集約管理 / Centralized management of Error/Alert/Runbook to minimize operational costs using automated code generation
biwashi
9
2.1k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Git: the NoSQL Database
bkeepers
PRO
422
63k
The Invisible Side of Design
smashingmag
294
49k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
4 Signs Your Business is Dying
shpigford
175
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The Invisible Customer
myddelton
114
12k
The Mythical Team-Month
searls
215
42k
A Tale of Four Properties
chriscoyier
150
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
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