345 lines
9.6 KiB
HTML
345 lines
9.6 KiB
HTML
<!doctype html>
|
|
<html lang='en' class='no-js '>
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta charset='utf-8'>
|
|
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
|
<link href='./assets/favicon.png' rel='shortcut icon'>
|
|
<meta content='/gulp.html' name='app:pageurl'>
|
|
|
|
|
|
<title>Gulp cheatsheet</title>
|
|
<meta content='Gulp cheatsheet' property='og:title'>
|
|
<meta content='Gulp cheatsheet' property='twitter:title'>
|
|
<meta content='article' property='og:type'>
|
|
|
|
|
|
|
|
<meta content='https://assets.devhints.io/previews/gulp.jpg?t=20220707130803' property='og:image'>
|
|
<meta content='https://assets.devhints.io/previews/gulp.jpg?t=20220707130803' property='twitter:image'>
|
|
<meta content='900' property='og:image:width'>
|
|
<meta content='471' property='og:image:height'>
|
|
|
|
|
|
|
|
<meta content="The one-page guide to Gulp: usage, examples, links, snippets, and more." name="description">
|
|
<meta content="The one-page guide to Gulp: usage, examples, links, snippets, and more." property="og:description">
|
|
<meta content="The one-page guide to Gulp: usage, examples, links, snippets, and more." property="twitter:description">
|
|
|
|
|
|
<link rel="canonical" href="https://devhints.io/gulp">
|
|
<meta name="og:url" content="https://devhints.io/gulp">
|
|
|
|
|
|
|
|
|
|
|
|
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta content='JavaScript libraries' property='article:section'>
|
|
|
|
|
|
|
|
|
|
|
|
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
|
<script>
|
|
|
|
window.dataLayer=window.dataLayer||[];
|
|
function gtag(){dataLayer.push(arguments)};
|
|
gtag('js',new Date());
|
|
gtag('config','UA-106902774-1');
|
|
</script>
|
|
|
|
|
|
|
|
<meta property='page:depth' content='1'>
|
|
|
|
|
|
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
|
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
|
|
|
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))</script>
|
|
|
|
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
|
|
|
<style>html{opacity:0}</style>
|
|
<link rel="stylesheet" href="./assets/2015/style.css?t=20220707130803">
|
|
<link href="./assets/style.css?t=20220707130803" rel="stylesheet" />
|
|
<link href="./assets/print.css?t=20220707130803" rel="stylesheet" media="print" />
|
|
</head>
|
|
<body>
|
|
<div class='all'>
|
|
|
|
<div class='site-header'>
|
|
<div class='container'>
|
|
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script type='application/ld+json'>
|
|
{
|
|
"@context": "http://schema.org",
|
|
"@type": "NewsArticle",
|
|
"mainEntityOfPage": {
|
|
"@type": "WebPage",
|
|
"@id": "https://google.com/article"
|
|
},
|
|
"headline": "Gulp cheatsheet",
|
|
"image": [ "https://assets.devhints.io/previews/gulp.jpg?t=20220707130803" ],
|
|
"description": "The one-page guide to Gulp: usage, examples, links, snippets, and more."
|
|
}
|
|
</script>
|
|
<script type='application/ld+json'>
|
|
{
|
|
"@context": "http://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"item": {
|
|
"@id": "https://devhints.io/#javascript-libraries",
|
|
"name": "JavaScript libraries"
|
|
}
|
|
},{
|
|
"@type": "ListItem",
|
|
"position": 2,
|
|
"item": {
|
|
"@id": "https://devhints.io/gulp",
|
|
"name": "Gulp"
|
|
}
|
|
}]
|
|
}
|
|
</script>
|
|
|
|
|
|
<div class='post-list -single -cheatsheet'>
|
|
<div class='post-item'>
|
|
<div class='post-headline -cheatsheet'>
|
|
<p class='prelude'><span></span></p>
|
|
<h1><span>Gulp</span></h1>
|
|
|
|
<div class='pubbox'>
|
|
<div class='HeadlinePub' role='complementary'>
|
|
<script async src='https://pubsrv.devhints.io/carbon.js?serve=CE7IK5QM&placement=devhintsio&cd=pubsrv.devhints.io/s' id="_carbonads_js"></script>
|
|
<span class='placeholder -one'></span>
|
|
<span class='placeholder -two'></span>
|
|
<span class='placeholder -three'></span>
|
|
<span class='placeholder -four'></span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class='post-content -cheatsheet'>
|
|
<ul>
|
|
<li>gulp-ruby-sass</li>
|
|
<li>gulp-autoprefixer</li>
|
|
<li>gulp-minify-css</li>
|
|
<li>gulp-jshint</li>
|
|
<li>gulp-concat</li>
|
|
<li>gulp-uglify</li>
|
|
<li>gulp-imagemin</li>
|
|
<li>gulp-livereload (requires tiny-lr)</li>
|
|
<li>gulp-clean</li>
|
|
<li>gulp-cache</li>
|
|
<li>
|
|
<p>gulp-notify</p>
|
|
</li>
|
|
<li>gulp-header (headers in files)</li>
|
|
<li>gulp-mocha</li>
|
|
<li>gulp-stylus</li>
|
|
<li>gulp-compass</li>
|
|
<li>gulp-nodemon</li>
|
|
<li>gulp-size (displays size)</li>
|
|
</ul>
|
|
|
|
<h3 id="example">Example</h3>
|
|
|
|
<pre><code>// gulpfile.js
|
|
// Load plugins
|
|
var gulp = require('gulp'),
|
|
sass = require('gulp-ruby-sass'),
|
|
autoprefixer = require('gulp-autoprefixer'),
|
|
minifycss = require('gulp-minify-css'),
|
|
jshint = require('gulp-jshint'),
|
|
uglify = require('gulp-uglify'),
|
|
imagemin = require('gulp-imagemin'),
|
|
rename = require('gulp-rename'),
|
|
clean = require('gulp-clean'),
|
|
concat = require('gulp-concat'),
|
|
notify = require('gulp-notify'),
|
|
cache = require('gulp-cache'),
|
|
livereload = require('gulp-livereload'),
|
|
lr = require('tiny-lr'),
|
|
server = lr();
|
|
|
|
// Styles
|
|
gulp.task('styles', function() {
|
|
return gulp.src('src/styles/main.scss')
|
|
.pipe(sass({ style: 'expanded', }))
|
|
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
|
|
.pipe(gulp.dest('dist/styles'))
|
|
.pipe(rename({ suffix: '.min' }))
|
|
.pipe(minifycss())
|
|
.pipe(livereload(server))
|
|
.pipe(gulp.dest('dist/styles'))
|
|
.pipe(notify({ message: 'Styles task complete' }));
|
|
});
|
|
|
|
// Scripts
|
|
gulp.task('scripts', function() {
|
|
return gulp.src('src/scripts/**/*.js')
|
|
.pipe(jshint('.jshintrc'))
|
|
.pipe(jshint.reporter('default'))
|
|
.pipe(concat('main.js'))
|
|
.pipe(gulp.dest('dist/scripts'))
|
|
.pipe(rename({ suffix: '.min' }))
|
|
.pipe(uglify())
|
|
.pipe(livereload(server))
|
|
.pipe(gulp.dest('dist/scripts'))
|
|
.pipe(notify({ message: 'Scripts task complete' }));
|
|
});
|
|
|
|
// Images
|
|
gulp.task('images', function() {
|
|
return gulp.src('src/images/**/*')
|
|
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
|
|
.pipe(livereload(server))
|
|
.pipe(gulp.dest('dist/images'))
|
|
.pipe(notify({ message: 'Images task complete' }));
|
|
});
|
|
|
|
// Clean
|
|
gulp.task('clean', function() {
|
|
return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
|
|
.pipe(clean());
|
|
});
|
|
|
|
// Default task
|
|
gulp.task('default', ['clean'], function() {
|
|
gulp.start('styles', 'scripts', 'images');
|
|
});
|
|
|
|
// Watch
|
|
gulp.task('watch', function() {
|
|
|
|
// Listen on port 35729
|
|
server.listen(35729, function (err) {
|
|
if (err) {
|
|
return console.log(err)
|
|
};
|
|
|
|
// Watch .scss files
|
|
gulp.watch('src/styles/**/*.scss', ['styles']);
|
|
|
|
// Watch .js files
|
|
gulp.watch('src/scripts/**/*.js', ['scripts']);
|
|
|
|
// Watch image files
|
|
gulp.watch('src/images/**/*', ['images']);
|
|
|
|
});
|
|
|
|
});
|
|
</code></pre>
|
|
|
|
<h3 id="references">References</h3>
|
|
|
|
<p>https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md#getting-started</p>
|
|
|
|
<h3 id="livereload">Livereload</h3>
|
|
|
|
<pre><code>var lr = require('tiny-lr')();
|
|
|
|
function notify (lr, root) {
|
|
return function (event) {
|
|
var fname = require('path').relative(root, event.path);
|
|
lr.changed({ body: { files: [ fname ] }});
|
|
};
|
|
}
|
|
|
|
gulp.task('livereload', function () {
|
|
lr.listen(35729)
|
|
gulp.watch('public/**/*', notify(lr, __dirname+'/public'));
|
|
});
|
|
|
|
// Express
|
|
app.use(require('connect-livereload')())
|
|
<!-- livereload --><script>document.write('<script src="'+(location.protocol||'http:')+'//'+(location.hostname||'localhost')+':35729/livereload.js?snipver=1"><\/scr'+'ipt>')</script>
|
|
</code></pre>
|
|
|
|
</div>
|
|
|
|
|
|
<ul class="social-list ">
|
|
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/gulp.html" target="share"><span class="text"></span></a></li>
|
|
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Gulp.%20https://devhints.io/gulp.html" target="share"><span class="text"></span></a></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="about-the-site">
|
|
<div class="container">
|
|
<p class='blurb'>
|
|
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
|
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
|
<i class='fleuron'></i>
|
|
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
|
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
|
</p>
|
|
|
|
|
|
<p class='back'>
|
|
<a class='big-button -back -slim' href='.#toc'></a>
|
|
</p>
|
|
|
|
|
|
<p>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
|
<script>hljs.initHighlightingOnLoad()</script>
|
|
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
|
|
|
</body>
|
|
</html>
|
|
|