mirror of
https://github.com/seigler/dashdev-website
synced 2025-07-26 22:36:09 +00:00
138 lines
No EOL
3.8 KiB
HTML
138 lines
No EOL
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Gulp - dashdevs-suite</title>
|
|
<meta name="description" content="Do you need Gulp? Can it be integrated with Metalsmith?" />
|
|
|
|
<meta name="HandheldFriendly" content="true">
|
|
<meta name="MobileOptimized" content="320">
|
|
<meta name="viewport" content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
|
|
<link rel="stylesheet" media="all" href="../../css/styles.css" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header>
|
|
|
|
<div class="content">
|
|
|
|
<p class="logo"><a href="../../">dashdevs-suite</a></p>
|
|
<!-- main navigation -->
|
|
<nav class="nav main">
|
|
<ul>
|
|
<li>
|
|
<a href="../../">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="../../start/">Start</a>
|
|
</li>
|
|
<li>
|
|
<a href="../../article/" class="active">Articles</a>
|
|
</li>
|
|
<li>
|
|
<a href="../../contact/">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<main class="subpages" >
|
|
|
|
<div class="content">
|
|
|
|
|
|
<!-- sub navigation -->
|
|
<nav class="nav sub">
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="../../article/usage/">Usage options</a>
|
|
</li>
|
|
<li>
|
|
<a href="../../article/gotchas/">Gotchas</a>
|
|
</li>
|
|
<li>
|
|
<strong>Gulp</strong>
|
|
</li>
|
|
<li>
|
|
<a href="../../article/future/">Future publication</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
<article>
|
|
|
|
<h1>Gulp</h1>
|
|
|
|
|
|
<p class="articleinfo">Published 2 March 2016, 141 words, 1-minute read</p>
|
|
|
|
|
|
<p>Metalsmith has plugins for <a href="https://github.com/stevenschobert/metalsmith-sass">CSS pre-processing with Sass</a>, <a href="https://github.com/ahmadnassri/metalsmith-imagemin">image minification</a>, <a href="https://github.com/aymericbeaumet/metalsmith-concat">file concatenation</a>, <a href="https://github.com/ksmithut/metalsmith-uglify">uglification</a> and more. The build code will be familiar to anyone with <a href="http://gulpjs.com/">Gulp</a> experience.</p>
|
|
<h2 id="do-you-still-need-gulp">Do you still need Gulp?</h2>
|
|
<p>Metalsmith is often enough for simpler workflows. However, Gulp has a more extensive range of plugins and permits complex build activities such as linting and <a href="http://postcss.org/">PostCSS</a> processing with <a href="https://github.com/postcss/autoprefixer">auto-prefixer</a>.</p>
|
|
<p>Metalsmith can be used within any Gulp task, e.g.</p>
|
|
<pre><code>var
|
|
gulp = require('gulp'),
|
|
metalsmith = require('metalsmith'),
|
|
publish = require('metalsmith-publish'),
|
|
markdown = require('metalsmith-markdown');
|
|
|
|
// build HTML files using Metalsmith
|
|
gulp.task('html', function() {
|
|
|
|
var ms = metalsmith(dir.base)
|
|
.clean(false)
|
|
.source('src/html/')
|
|
.destination('build')
|
|
.use(publish())
|
|
.use(markdown())
|
|
.build(function(err) {
|
|
if (err) throw err;
|
|
});
|
|
|
|
});</code></pre><p>Further Gulp tasks can then be added. Note <code>.clean(false)</code> ensures Metalsmith never wipes the build folder when other tasks are active.</p>
|
|
<p>There are a number of Gulp/Metalsmith integration plugins although they are rarely necessary.</p>
|
|
|
|
|
|
|
|
<nav class="nav page">
|
|
<ul>
|
|
|
|
<li><a href="../../article/gotchas/" class="back">« back: Gotchas</a></li>
|
|
</p>
|
|
|
|
<li><a href="../../article/future/" class="next">next: Future publication »</a></li>
|
|
</p>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
</article>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
|
|
|
|
<p>Help make this page better. <a href="https://github.com/dashdev-suite/dashdev-website/tree/master/src">Edit here >></a></p>
|
|
|
|
|
|
</footer>
|
|
</body>
|
|
|
|
</html> |