This repository has been archived on 2025-01-19. You can view files and clone it, but cannot push or open issues or pull requests.
oliverdavies.uk-old-sculpin/docs/blog/2017/01/07/easier-sculpin-commands-with-composer-and-npm-scripts/index.html
2017-07-10 22:28:39 +01:00

269 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html class="no-js" lang="en-GB">
<head>
<title>Easier Sculpin Commands with Composer and NPM Scripts | Oliver Davies</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:url" content="https://www.oliverdavies.uk/blog/2017/01/07/easier-sculpin-commands-with-composer-and-npm-scripts">
<meta property="og:title" content="Easier Sculpin Commands with Composer and NPM Scripts"/>
<meta property="og:image" content="https://www.oliverdavies.uk/assets/images/me-precedent.jpg"/>
<meta property="og:image:height" content="327"/>
<meta property="og:image:type" content="image/jpg">
<meta property="og:image:width" content="327"/>
<link rel="stylesheet" href="https://www.oliverdavies.uk/assets/css/main.css">
<link rel="stylesheet" href="https://www.oliverdavies.uk/assets/css/blog-post.css">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=57" sizes="57x57">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=114" sizes="114x114">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=72" sizes="72x72">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=144" sizes="144x144">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=60" sizes="60x60">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=120" sizes="120x120">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=76" sizes="76x76">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=152" sizes="152x152">
<link rel="icon" href="/assets/images/me-precedent.jpg?s=160" sizes="160x160">
<link rel="icon" href="/assets/images/me-precedent.jpg?s=96" sizes="96x96">
<link rel="icon" href="/assets/images/me-precedent.jpg?s=32" sizes="32x32">
<link rel="icon" href="/assets/images/me-precedent.jpg?s=16" sizes="16x16">
</head>
<body class="">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://www.oliverdavies.uk/">Oliver Davies</a>
</div>
<div id="navbar" class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="">
<a href="/">About</a>
</li>
<li class="">
<a href="/experience">Experience</a>
</li>
<li class="">
<a href="/testimonials">Testimonials</a>
</li>
<li class="">
<a href="/talks">Talks</a>
</li>
<li class="active">
<a href="/blog">Blog</a>
</li>
<li class="">
<a href="/contact">Contact</a>
</li>
</ul>
</div> </div>
</nav>
<div class="container">
<div class="row">
<main class="col-md-9">
<h1>Easier Sculpin Commands with Composer and NPM Scripts</h1>
<p class="posted">7th January 2017</p>
<p>My website includes several various command line tools - e.g. <a href="https://sculpin.io">Sculpin</a>, <a href="http://gulpjs.com">Gulp</a> and <a href="http://behat.org">Behat</a> - each needing different arguments and options, depending on the command being run. For example, for Sculpin, I normally include several additional options when viewing the site locally - the full command that I use is <code>./vendor/bin/sculpin generate --watch --server --clean --no-interaction</code>. Typing this repeatedly is time consuming and could be easily mis-typed, forgotten or confused with other commands.</p>
<p>In this video, I show you how I've simplied my Sculpin and Gulp workflow using custom Composer and NPM scripts.</p>
<div class="embed-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/eiWDV_63yCQ" frameborder="0" allowfullscreen></iframe>
</div>
<h2 id="scripts">Scripts</h2>
<p>Here are the scripts that Im using - they are slightly different from those in the video. I use the <code>--generate</code> and <code>--watch</code> options for Sculpin and the <code>gulp watch</code> command for NPM. I had to change these before the recording as I was using the <a href="https://github.com/paxtonhare/demo-magic">demo magic</a> script to run the commands, and existing from a watch session was also ending the script process.</p>
<h3 id="composer.json">composer.json</h3>
<pre><code class="language-json">"scripts": {
"clean": "rm -rf output_*/",
"dev": "sculpin generate --clean --no-interaction --server --watch",
"production": "sculpin generate --clean --no-interaction --env='prod' --quiet"
}
</code></pre>
<p>Run with <code>composer run &lt;name&gt;</code>, e.g. <code>composer run dev</code>.</p>
<h3 id="package.json">package.json</h3>
<pre><code class="language-json">"scripts": {
"init": "yarn &amp;&amp; bower install",
"dev": "gulp watch",
"production": "gulp --production"
}
</code></pre>
<p>Run with <code>npm run &lt;name&gt;</code>, e.g. <code>npm run production</code>.</p>
<p>You can also take a look at the full <a href="https://github.com/opdavies/oliverdavies.uk/blob/master/composer.json">composer.json</a> and <a href="https://github.com/opdavies/oliverdavies.uk/blob/master/package.json">package.json</a> files within my site repository on <a href="https://github.com/opdavies/oliverdavies.uk">GitHub</a>.</p>
<h2 id="resources">Resources</h2>
<ul>
<li><a href="https://getcomposer.org/doc/04-schema.md#scripts">Composer scripts</a></li>
<li><a href="https://github.com/opdavies/oliverdavies.uk/blob/master/composer.json">oliverdavies.uk composer.json</a></li>
<li><a href="https://github.com/opdavies/oliverdavies.uk/blob/master/package.json">oliverdavies.uk package.json</a></li>
</ul>
<p class="tags">
Tags:
<a href="https://www.oliverdavies.uk/blog/tags/composer">composer</a>, <a href="https://www.oliverdavies.uk/blog/tags/gulp">gulp</a>, <a href="https://www.oliverdavies.uk/blog/tags/sculpin">sculpin</a> </p>
<div class="post-pager is-flex">
<div class="is-half">
<a href="/blog/2016/12/30/drupal-vm-generator-291-released">
&laquo; Drupal VM Generator 2.9.1 Released
</a>
</div>
<div class="is-half text-right">
<a href="/blog/2017/01/31/nginx-redirects-with-query-string-arguments">
Nginx Redirects With Query String Arguments &raquo;
</a>
</div>
</div>
<div class="about-author">
<h2>About the Author</h2>
<img src="//images.oliverdavies.uk/assets/images/me-precedent.jpg" alt="Picture of Oliver" class="img-circle">
<p>Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a Senior Developer at <a href="https://microserve.io">Microserve</a> and also provides freelance consultancy services for Drupal websites, PHP applications and Linux servers.</p>
</div>
</main>
<div class="col-md-3">
<div class="panel badges text-center">
<a class="badge--da-member" href="https://assoc.drupal.org/membership" title="Im a Drupal Association member.">
<img
src="//images.oliverdavies.uk/assets/images/da-individual-member.png"
alt="Drupal Association Individual Member"
width="152"
>
</a>
<a href="http://drupalcores.com/#opdavies">
<img
alt="I built Drupal 8 with hand holding a wrench on blue background"
src="//images.oliverdavies.uk/assets/images/drupal-8.jpg"
/>
</a>
<img
src="//images.oliverdavies.uk/assets/images/badges/acquia-certified-developer-drupal-8.png"
alt="Acquia Certified Developer - Drupal 8 Exam Badge"
height="147" width="147"
/>
<a href="http://conference.phpnw.org.uk/phpnw17">
<img src="//images.oliverdavies.uk/assets/images/badges/phpnw17.png" alt="">
</a>
</div>
<div class="availability panel panel-default">
<div class="panel-heading">Availability</div>
<div class="panel-body">
<p>
<i class="fa fa-thumbs-o-up text-warning"></i>
Currently have limited part-time capacity
</p>
<p>
<i class="fa fa-thumbs-o-down text-danger"></i>
Currently no spare full-time capacity.
</p>
</div>
</div>
<div class="latest-posts panel panel-default">
<div class="latest-posts__heading panel-heading">Latest blog posts</div>
<ul class="list-group">
<li class="post list-group-item">
<span class="post__title">
<a href="/blog/2017/06/09/introducing-the-drupal-meetups-twitterbot">
Introducing the Drupal Meetups Twitterbot
</a>
</span> -
<span class="post__date">9th June, 2017</span>
</li>
<li class="post list-group-item">
<span class="post__title">
<a href="/blog/2017/05/20/turning-drupal-module-into-feature">
Turning Your Custom Drupal Module into a Feature
</a>
</span> -
<span class="post__date">20th May, 2017</span>
</li>
<li class="post list-group-item">
<span class="post__title">
<a href="/blog/2017/05/15/drupalcamp-bristol-early-bird-tickets-sessions-sponsors">
DrupalCamp Bristol 2017 - Early Bird Tickets, Call for Sessions, Sponsors
</a>
</span> -
<span class="post__date">15th May, 2017</span>
</li>
</ul>
</div>
</div>
</div> </div>
<footer class="container">
<p class="copyright">
&copy; 2010-2017 Oliver Davies. Built with <a href="https://sculpin.io">Sculpin</a>.
</p>
<div class="meetups">
<h2>Things that I organise</h2>
<ul>
<li class="meetups--drupal-bristol">
<a href="http://www.drupalbristol.org.uk" title="Drupal Bristol">
<img src="//images.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg" alt="Drupal Bristol">
</a>
</li>
<li class="meetups--drupalcamp-bristol">
<a href="http://www.drupalcampbristol.co.uk" title="DrupalCamp Bristol">
<img src="//images.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png" alt="DrupalCamp Bristol">
</a>
</li>
<li class="meetups--phpsw">
<a href="http://phpsw.uk" title="PHPSW">
<img src="//images.oliverdavies.uk/assets/images/meetups/phpsw.jpeg" alt="PHPSW">
</a>
</li>
</ul>
</div>
</footer>
<script src="https://www.oliverdavies.uk/assets/js/site.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-11967257-1', 'auto'); ga('send', 'pageview');</script>
</body>
</html>