How to compile bootstrap SASS with an asset pipeline

Let's start off a new project the right way, with Bootstrap 4 as a dependency and our changes only made to our own scss source files. This howto uses Pulp, the streaming build pipeline.

Complete example

Here is the complete pulp task from the video.

<?php
use \Pulp\LiveReload as lr;
use \Pulp\Scss       as scss;
$p = new \Pulp\Pulp();

$watchDirsCode = ['src/**/*.php'];
$watchDirsCss  = ['templates/twbs4/styles/*.scss'];
$sourceFileCss = 'templates/twbs4/styles/site.scss';
$outputDirCss  =  'templates/twbs4/dist/css/';


$p->task('watch', function() use($p, $watchDirsCode, $watchDirsCss, $outputDirCss, $sourceFileCss) {
	$p->exec('sass');
	$lr = new lr();
	$lr->listen($p->loop);

	$p->watch( $watchDirsCode )->on('change', function($file) use ($p) {
		$lr->fileChanged($file);
	});

	$p->watch( $watchDirsCss )->on('change', function($file) use ($p, $lr, $watchDirsCss, $outputDirCss, $sourceFileCss) {
		$pipe = compileSass($p, $sourceFileCss, $outputDirCss);
		return $pipe->pipe($lr);
	});
});

$p->task('sass', function() use($p, $watchDirsCode, $watchDirsCss, $outputDirCss, $sourceFileCss) {
		return compileSass($p, $sourceFileCss, $outputDirCss);
});


function compileSass($p, $src, $dest) {
	return $p->src($src)
		->pipe(new \Pulp\Debug())
		->pipe(new scss( ['importPath'=>['local/twbs/bootstrap/scss/', 'templates/twbs4/styles/']] ))
		->pipe($p->dest($dest));
}

Go get pulp: Github Page

Github Project Page