Laravel & Angular Asset Pipeline with Gulp

README.md

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

build.js

'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']);

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

same