Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

commented Sep 28, 2014

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

@odyright

This comment has been minimized.

Copy link

commented May 2, 2016

same

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.