Skip to content

Instantly share code, notes, and snippets.

@niallobrien
Last active May 2, 2016 11:57
Show Gist options
  • Save niallobrien/ea2bb9b7a62d7bccd09f to your computer and use it in GitHub Desktop.
Save niallobrien/ea2bb9b7a62d7bccd09f to your computer and use it in GitHub Desktop.
Laravel & Angular Asset Pipeline with Gulp

Laravel & Angular

Overview

This setup involves creating a Laravel API and an Angular client-app with Gulp covering the asset pipeline.

Our Laravel API server will serve one view only and that is to simply load the Angular app.

First, create a new directory for your project. We're going to place the server and client directories in here. You'll need to install Laravel, Yeoman, generator-gulp-angular and any other dependencies.

Server

mkdir exampleApp && $_
laravel new server

Open exampleApp/server/app/routes.php and change return View::make('hello'); to return View::make('index');

Client

For the client, run Yeoman to setup the app. We'll replace the build task to suit Laravel's setup.

mkdir client && $_
yo gulp-angular client

Before running any Gulp tasks, let's replace gulp-ruby-sass with gulp-sass. Gulp-sass is faster. We'll also need gulp-rename and gulp-notify.

npm install gulp-sass gulp-rename gulp-notify --save-dev

After you've run the generator and selected your preferred modules etc., replace exampleApp/client/gulp/build.js with the file provided below. The gulp build task will output all assets into exampleApp/server/public/ and output the html file as exampleApp/server/app/views/index.blade.php all setup to load your Angular app.

Gulp Tasks

  • gulp or gulp build to build an optimized version of your application in /server/public. The index file is placed in /server/app/views/ as index.blade.html
  • gulp serve to launch a browser sync server on your source files
  • gulp serve:dist to launch a server on your optimized application
  • gulp wiredep to fill bower dependencies in your .html file(s)
  • gulp test to launch your unit tests with Karma
  • gulp protractor to launch your e2e tests with Protractor
  • gulp protractor:dist to launch your e2e tests with Protractor on the dist files
'use strict';
var gulp = require('gulp');
var $ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license']
});
gulp.task('styles', function () {
return gulp.src('app/styles/main.scss')
.pipe($.plumber())
.pipe($.sass({
errLogToConsole: false,
onError: function(err) {
return $.notify().write(err);
}
}))
.pipe($.autoprefixer('last 1 version'))
.pipe(gulp.dest('.tmp/styles'))
.pipe($.size());
});
gulp.task('scripts', function () {
return gulp.src('app/scripts/**/*.js')
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.size());
});
gulp.task('partials', function () {
return gulp.src('app/partials/**/*.html')
.pipe($.minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe($.ngHtml2js({
moduleName: 'client',
prefix: 'partials/'
}))
.pipe(gulp.dest('.tmp/partials'))
.pipe($.size());
});
gulp.task('html', ['styles', 'scripts', 'partials'], function () {
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
return gulp.src('app/*.html')
.pipe($.inject(gulp.src('.tmp/partials/**/*.js'), {
read: false,
starttag: '<!-- inject:partials -->',
addRootSlash: false,
addPrefix: '../'
}))
.pipe($.useref.assets())
.pipe($.rev())
.pipe(jsFilter)
.pipe($.ngAnnotate())
.pipe($.uglify({preserveComments: $.uglifySaveLicense}))
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.replace('bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap','fonts'))
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe($.useref.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe(gulp.dest('dist'))
.pipe($.size());
});
gulp.task('images', function () {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
optimizationLevel: 3,
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
.pipe($.size());
});
gulp.task('fonts', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff}'))
.pipe($.flatten())
.pipe(gulp.dest('dist/fonts'))
.pipe($.size());
});
gulp.task('copy-html', function () {
return gulp.src('dist/index.html')
.pipe($.rename('index.blade.php'))
.pipe(gulp.dest('../server/app/views/'));
});
gulp.task('copy-styles', function () {
return gulp.src('dist/styles/**/*.css')
.pipe(gulp.dest('../server/public/styles/'));
});
gulp.task('copy-scripts', function () {
return gulp.src('dist/scripts/**/*.js')
.pipe(gulp.dest('../server/public/scripts/'));
});
gulp.task('copy-partials', function () {
return gulp.src('dist/partials/**/*.js')
.pipe(gulp.dest('../server/public/partials/'));
});
gulp.task('copy-images', function () {
return gulp.src('dist/images/**/*')
.pipe(gulp.dest('../server/public/images/'));
});
gulp.task('copy-fonts', function () {
return gulp.src('dist/fonts/**/*.{eot,svg,ttf,woff}')
.pipe(gulp.dest('../server/public/fonts/'));
});
gulp.task('copy', ['copy-html', 'copy-styles', 'copy-scripts', 'copy-partials', 'copy-images', 'copy-fonts']);
gulp.task('clean', function () {
return gulp.src(['.tmp', 'dist'], { read: false }).pipe($.rimraf());
});
gulp.task('build', ['html', 'partials', 'images', 'fonts', 'copy']);
@tarex
Copy link

tarex commented Sep 28, 2014

hi , can you please attach your bower.json and package.json file ?
thanks

@odyright
Copy link

odyright commented May 2, 2016

same

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment