search

yeoman / generator-angular

Yeoman generator for AngularJS
http://yeoman.io
5.73k stars 1.44k forks source link

gulpfile.js fix for bugs (test, bower_components, favicon and so on) #1299

Open bumprat opened 8 years ago

bumprat commented 8 years ago

The gulp support is buggy. Here's the gulpfile.js I edited to solve several issues:

// Generated on 2016-03-15 using generator-angular 0.15.1
'use strict';

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var openURL = require('open');
var lazypipe = require('lazypipe');
var rimraf = require('rimraf');
var wiredep = require('wiredep').stream;
var runSequence = require('run-sequence');

//app directory structor
var yeoman = {
  app: require('./bower.json').appPath || 'app',
  dist: 'dist',
  temp: '.tmp',
  test: 'test'
};

// for sources
var paths = {
  scripts: [yeoman.app + '/scripts/**/*.js'],
  styles: [yeoman.app + '/styles/**/*.scss'],
  test: ['test/spec/**/*.js'],
  testRequire: [
    'bower_components/angular/angular.js',
    'bower_components/angular-mocks/angular-mocks.js',
    'bower_components/angular-resource/angular-resource.js',
    'bower_components/angular-cookies/angular-cookies.js',
    'bower_components/angular-sanitize/angular-sanitize.js',
    'bower_components/angular-route/angular-route.js',
    'bower_components/angular-animate/angular-animate.js',
    'bower_components/angular-touch/angular-touch.js',
    'bower_components/angular-ui-sortable/sortable.js',
    'bower_components/angular-local-storage/dist/angular-local-storage.js',
    'test/mock/**/*.js',
    'test/spec/**/*.js'
  ],
  karma: yeoman.test + '/karma.conf.js',
  views: {
    main: yeoman.app + '/index.html',
    bowermain: yeoman.temp + '/index.html',
    files: [yeoman.app + '/views/**/*.html']
  }
};

////////////////////////
// Reusable pipelines //
////////////////////////

var lintScripts = lazypipe()
  .pipe($.jshint) // '.jshintrc'
  .pipe($.jshint.reporter,'jshint-stylish' );

var styles = lazypipe()
  .pipe($.sass, {
    outputStyle: 'expanded',
    precision: 10
  })
  .pipe($.autoprefixer, {
    browsers:['last 2 version']
  })
  .pipe(gulp.dest,yeoman.temp + '/styles');

///////////
// Tasks //
///////////

gulp.task('styles', function () {
  return gulp.src(paths.styles)
    .pipe(styles());
});

gulp.task('lint:scripts', function () {
  return gulp.src(paths.scripts)
    .pipe(lintScripts());
});

gulp.task('clean:tmp', function (cb) {
  rimraf(yeoman.temp, cb);
});

gulp.task('start:client', ['start:server', 'styles', 'lint:scripts'], function () {
  openURL('http://localhost:9000');
});

gulp.task('start:server', function() {
  $.connect.server({
    root:[yeoman.temp, yeoman.app],
    livereload:true,
    port: 9000,
    middleware:function(connect, opt){
      return [['/bower_components', 
        connect["static"]('./bower_components')]]
    }
  });
});

gulp.task('start:server:test', function() {
  $.connect.server({
    root: [yeoman.test, yeoman.app, yeoman.temp],
    livereload: true,
    port: 9001,
    middleware:function(connect, opt){
      return [['/bower_components', connect["static"]('./bower_components')]
    ]}
  });
});

gulp.task('watch', function () {
  $.watch(paths.styles)
    .pipe($.plumber())
    .pipe(styles())
    .pipe($.connect.reload())

  $.watch(paths.views.files)
    .pipe($.plumber())
    .pipe($.connect.reload())

  $.watch(paths.scripts)
    .pipe($.plumber())
    .pipe(lintScripts())

  $.watch(paths.test)
    .pipe($.plumber())

  gulp.watch('bower.json', ['bower']);
});

gulp.task('serve', function (cb) {
  runSequence('clean:tmp',
    ['bower'],
    ['lint:scripts'],
    ['start:client'],
    'watch', cb);
});

gulp.task('serve:prod', function() {
  $.connect.server({
    root:[yeoman.dist],
    livereload:{
      port:81
    },
    port: 80,
    middleware:function(connect, opt){
      return [['/bower_components', connect["static"]('./bower_components')]
    ]}
  });
});

gulp.task('test', ['start:server:test'], function () {
  var testToFiles = paths.testRequire.concat(paths.scripts, paths.test);
  return gulp.src(testToFiles)
    .pipe($.karma({
      configFile: paths.karma,
      action: 'watch'
    }));
});

// inject bower components
gulp.task('bower', function () {
  return gulp.src(paths.views.main)
    .pipe(wiredep({
      directory: /*yeoman.app +*/ 'bower_components',
      ignorePath: '..'
    }))
  .pipe(gulp.dest(yeoman.temp));
});

///////////
// Build //
///////////

gulp.task('clean:dist', function (cb) {
  rimraf(yeoman.dist, cb);
});

gulp.task('client:build', ['bower', 'html', 'styles'], function () {
  var jsFilter = $.filter('**/*.js');
  var cssFilter = $.filter('**/*.css');

  return gulp.src(paths.views.bowermain)
    .pipe($.useref({searchPath: [yeoman.app, yeoman.temp]}))
    .pipe(jsFilter)
    .pipe($.ngAnnotate())
    .pipe($.uglify())
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe($.minifyCss({cache: true}))
    .pipe(cssFilter.restore())
    .pipe(gulp.dest(yeoman.dist));
});

gulp.task('html', function () {
  return gulp.src(yeoman.app + '/views/**/*')
    .pipe(gulp.dest(yeoman.dist + '/views'));
});

gulp.task('images', function () {
  return gulp.src(yeoman.app + '/images/**/*')
    .pipe($.cache($.imagemin({
        optimizationLevel: 5,
        progressive: true,
        interlaced: true
    })))
    .pipe(gulp.dest(yeoman.dist + '/images'));
});

gulp.task('copy:extras', function () {
  return gulp.src(yeoman.app + '/*/.*', { dot: true })
    .pipe(gulp.dest(yeoman.dist));
});

gulp.task('copy:fonts', function () {
  return gulp.src('./bower_components/bootstrap/dist/fonts/**/*')
    .pipe(gulp.dest(yeoman.dist + '/fonts'));
});

gulp.task('copy:favicon', function () {
  return gulp.src(yeoman.app + '/favicon.ico')
    .pipe(gulp.dest(yeoman.dist));
});

gulp.task('build', ['clean:dist', 'bower'], function () {
  runSequence(['images', 'copy:extras', 'copy:fonts', 'copy:favicon', 'client:build']);
});

gulp.task('default', ['build']);
ianemcallister commented 8 years ago

Thanks bumprat! This was very helpful!

fsegouin commented 8 years ago

👍 thanks! this must be merged!

Droid-Kree commented 8 years ago

Thanks for Gulp fix!

bumprat commented 8 years ago

You're welcome! But I don't quite understand the procedures to pull and merge. Can someone knows do it for me. You have my permission.

aryo commented 8 years ago

@bumprat is there any reason you pipe the wired index.html into .tmp/ and not app/?

XWTiger commented 8 years ago

thanks for gulp fix!

vpArth commented 8 years ago

Sorry to spam PR's :) Just accidentally read contribute.md

miparnisari commented 8 years ago

Thanks for this! When will this be merged?

rblazquez commented 8 years ago

Note that if you dont use SASS but plain CSS you must:

1º Change "styles: [yeoman.app + '/styles/**/*.scss']" for "styles: [yeoman.app + '/styles/**/*.css']" 2º Remove SASS piping block:

  .pipe($.sass, {
    outputStyle: 'expanded',
    precision: 10
  })
vpArth commented 8 years ago

@rblazquez, it must be parametrized, like in my PR Because it is generator, not a snippet.

avihaym commented 8 years ago

Hii I changed my gulp file to above code but keep getting this message "Invalid call to lazypipe().pipe(): no stream creation function specified" Someone know why... ?

valentinibanez commented 8 years ago

me too

valentinibanez commented 8 years ago

solved it by inserting var lintScripts = lazypipe() .pipe($.jshint, '.jshintrc') .pipe($.jshint.reporter, 'jshint-stylish');

var styles = lazypipe() .pipe($.autoprefixer, 'last 1 version') .pipe(gulp.dest, '.tmp/styles');

instead of

var lintScripts = lazypipe() .pipe($.jshint) // '.jshintrc' .pipe($.jshint.reporter,'jshint-stylish' );

var styles = lazypipe() .pipe($.sass, { outputStyle: 'expanded', precision: 10 }) .pipe($.autoprefixer, { browsers:['last 2 version'] }) .pipe(gulp.dest,yeoman.temp + '/styles');

lashidalgo commented 8 years ago

Thanks for the file !!

MatthewVita commented 8 years ago

Hi @SBoudrias,

(Sorry to pick on you... saw that you have the most commits in the generator repository so I assumed you are the maintainer.)

OP's proposed file seems to be the fix for Yeoman Angular with Gulp. I noticed a PR here https://github.com/yeoman/generator-angular/pull/1322 - do you think that this can be merged in the codebase?

I would be happy to help with the code review and testing process, though I'd have to educate myself on the sourcecode first. I'm sure there are implications with merging this in that have to be considered. Just let me know!

Thanks, Matthew

najlepsiwebdesigner commented 8 years ago

Hi. I used provided gulpfile but I noticed that livereload won't work with gulp serve on index.html file. I fixed it with this modification:

gulp.task('watch', function () {
...
-  gulp.watch('bower.json', ['bower']);
+  gulp.watch(['bower.json',paths.views.main], ['clean:tmp','bower','styles']);
...
});
jazzninja commented 7 years ago

This replacement is extremely helpful when trying to configure a MEAN stack conflict situation.

nextlevelshit commented 7 years ago

Why isn't that fix already implemented? Btw, thanks a lot @bumprat !

andreslopezferro commented 7 years ago

Thanks @bumprat! When will be this merged?

udev commented 7 years ago

Still running into this problem nearly a full year later. Any ETA on a fix?

HaakonH commented 7 years ago

Howdy, It's 3/23/2017 - Any chance of getting this rolled into the build? Please, please please!!!

yakuzaaaa commented 7 years ago

I am new to gulp.

I have a main.scss in styles folder and some foo.scss and bar.scss

when doing gulp serve, the main.scss is included in the index.html file but not foo and bar (they got generated in the tmp folder css files though)