Gulp stream for building Shopify Apps on Laravel 5

gulp-app-shopify.js

// Gulp plugin setup 
var gulp = require('gulp');

// Gulp Ruby for local build
var sass = require('gulp-ruby-sass');

// Merge Streams
var merge = require('merge-stream');

// Bower Components
var mainBowerFiles = require('main-bower-files');
var gulpFilter = require('gulp-filter');

// SCSS - CSS Prefixer
var autoprefixer = require('gulp-autoprefixer');

// Minify CSS
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename');

// JS Includes / pipes
var order = require("gulp-order");
var include = require("gulp-include");
var concat = require("gulp-concat");
var saveLicense = require('uglify-save-license')
var uglify = require("gulp-uglify");

// Watches single files
var watch = require('gulp-watch');


/* ====================================== */
/* ===========  MANUAL TASKS  =========== */
/* ====================================== */


//--------- Bower Components ----------//
// Run "gulp bower_components" Manually, this is not a default task.
// See the Bower.json file overrides.


gulp.task('bower', function() {
	return gulp.src(mainBowerFiles('**/*.js'))
	.pipe(uglify({
		output: {
			comments: saveLicense
		}
	}))
	.on("error", console.log)
	.pipe(gulp.dest('resources/assets/javascript/components/'));
});



/* ====================================== */
/* =========  AUTOMATIC TASKS  ========== */
/* ====================================== */


//--------- SCSS ----------//
// Compile application SCSS stylesheets in CSS. 
// Bower Component SCSS/CSS files compile here too. 

gulp.task('app-scss', function() {
	return sass('resources/assets/sass/app.scss')
	.on('error', function(err) { console.error('Error!', err.message); })
	.pipe(autoprefixer({ browsers: ['last 2 versions'] }))
	.pipe(cssnano())
	.pipe(rename({
		suffix: '.min'
	}))
	.pipe(gulp.dest('public/assets/css/'));
});

gulp.task('app-sass', function() {
	gulp.watch([
		'resources/assets/sass/**/*.scss', 
		'!resources/assets/sass/wishlist.scss'], ['app-scss']);
});

// Snippet Sass

gulp.task('wishlist-scss', function() {
	return sass('resources/assets/sass/wishlist.scss')
	.on('error', function(err) { console.error('Error!', err.message); })
	.pipe(autoprefixer({ browsers: ['last 2 versions'] }))
	.pipe(cssnano())
	.pipe(rename({
		suffix: '.min'
	}))
	.pipe(gulp.dest('public/cdn/'));
});

gulp.task('wishlist-sass', function() {
	gulp.watch([
		'resources/assets/sass/**/*.scss', 
		'!resources/assets/sass/app.scss'], ['wishlist-scss']);
});


//--------- JavaScripts ----------//
// Compile application Javascripts. 
// Bower Components merged and seperate files compiled. 

gulp.task('app-javascript', function() {
	return gulp.src(['resources/assets/javascript/app.js'])
	.pipe(include())
	.pipe(uglify())
	.pipe(rename({
		suffix: '.min'
	}))
	.on("error", console.log)
	.pipe(gulp.dest('public/assets/js/'));
});

gulp.task('app-js', function() {
	gulp.watch('resources/assets/javascript/dependents/*.js', ['app-javascript']);
});


// Snippet Javascript

gulp.task('wishlist-javascript', function() {
	return gulp.src(['resources/assets/javascript/wishlist.js'])
	.pipe(include())
	.pipe(uglify())
	.pipe(rename({
		suffix: '.min'
	}))
	.on("error", console.log)
	.pipe(gulp.dest('public/cdn/'));
});

gulp.task('wishlist-js', function() {
	gulp.watch('resources/assets/javascript/dependents/*.js', ['wishlist-javascript']);
});


//--------- Default Watch ----------//
// Default gulp action when gulp is run.
gulp.task('default', ['app-sass', 'wishlist-sass', 'app-js', 'wishlist-js']);


//--------- MIT Licence ----------//
// Pretty lean stream? Feel free to use it for yourself!