Only generates 2 files - Githubissues

bryantp commented 8 years ago

Hello,

I am having trouble separating my css files into 3 (Vendor, App and Asset). It only ever generates 2 of them (Vendor and App) and completely ignores the Asset files. Here are my relevant gulp tasks:

Inject

const gulp = require('gulp');
const browserSync = require('browser-sync');
const wiredep = require('wiredep').stream;
const angularFilesort = require('gulp-angular-filesort');
const gulpInject = require('gulp-inject');

const conf = require('../conf/gulp.conf');

gulp.task('inject', inject);

function inject() {
  const injectScripts = gulp.src([
    conf.path.tmp('**/*.js'),
    `!${conf.path.tmp('**/*.spec.js')}`
  ])
  .pipe(angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));

  const injectOptions = {
    ignorePath: [conf.paths.src, conf.paths.tmp],
    addRootSlash: false
  };

  return gulp.src(conf.path.src('index.html'))
    .pipe(gulpInject(injectScripts, injectOptions))
    .pipe(wiredep(Object.assign({}, conf.wiredep)))
    .pipe(gulp.dest(conf.paths.tmp))
    .pipe(browserSync.stream());
}

Build

const gulp = require('gulp');
const filter = require('gulp-filter');
const useref = require('gulp-useref');
const rev = require('gulp-rev');
const revReplace = require('gulp-rev-replace');
const uglify = require('gulp-uglify');
const cssnano = require('gulp-cssnano');
const htmlmin = require('gulp-htmlmin');
const sourcemaps = require('gulp-sourcemaps');
const uglifySaveLicense = require('uglify-save-license');
const inject = require('gulp-inject');
const ngAnnotate = require('gulp-ng-annotate');

const conf = require('../conf/gulp.conf');

gulp.task('build', build);

function build() {
  const partialsInjectFile = gulp.src(conf.path.tmp('templateCacheHtml.js'), {read: false});
  const partialsInjectOptions = {
    starttag: '<!-- inject:partials -->',
    ignorePath: conf.paths.tmp,
    addRootSlash: false
  };

  const htmlFilter = filter(conf.path.tmp('*.html'), {restore: true});
  const jsFilter = filter(conf.path.tmp('**/*.js'), {restore: true});
  const cssFilter = filter(conf.path.tmp('**/*.css'), {restore: true});
  const jpgFilter = filter(conf.path.tmp('**/*.jpg'), {restore: true});

  return gulp.src(conf.path.tmp('/index.html'))
    .pipe(inject(partialsInjectFile, partialsInjectOptions))
    .pipe(useref())
    .pipe(jsFilter)
    .pipe(sourcemaps.init())
    .pipe(ngAnnotate())
    .pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
    .pipe(rev())
    .pipe(sourcemaps.write('maps'))
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    //.pipe(sourcemaps.init())
    .pipe(cssnano())
    .pipe(rev())
    //.pipe(sourcemaps.write('maps'))
    .pipe(cssFilter.restore)
    .pipe(revReplace())
    .pipe(htmlFilter)
    .pipe(htmlmin())
    .pipe(htmlFilter.restore)
    .pipe(gulp.dest(conf.path.dist()));
}

and html index file:

<!doctype html>
<html>
  <head>
    <base href="/">
    <meta charset="utf-8">
    <title>FountainJS</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />

    <!-- build:css({src}) styles/vendor.css -->
    <!-- bower:css -->
    <!-- run `gulp inject` to automatically populate bower styles dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({src,!src/assets}) styles/app.css -->
    <!-- endbuild -->

    <!-- build:css({src/assets,!src}) styles/asset.css -->
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/cards.css">    

    <link href="css/font-awesome.css" type="text/css" rel="stylesheet">
    <link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection"> 
    <link href="css/custom/custom.css" type="text/css" rel="stylesheet" media="screen,projection">

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <!-- endbuild -->
  </head>

  <body ng-app="app">
    <ui-view></ui-view>

  <!-- build:js({.tmp,src}) scripts/vendor.js -->
  <!-- bower:js -->
  <!-- run `gulp inject` to automatically populate bower script dependencies -->
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:js({.tmp,src}) scripts/app.js -->
  <!-- inject:js -->
  <!-- js files will be automatically insert here -->
  <!-- endinject -->
  <!-- inject:partials -->
  <!-- angular templates will be automatically converted in js and inserted here -->
  <!-- endinject -->

    <!--custom-script.js - Add your own theme custom JS-->
    <script type="text/javascript" src="assets/js/custom-script.js"></script>

  <!-- endbuild -->
  </body>
</html>

and here is my file structure (Standard Yeoman FountainJS with modification):

-Root:
  -src:
    -index.html
    -app:
      -components
    -assets
      -css
      - js
      - images

jonkemp commented 8 years ago

I think your problem is in this line  which is why you aren't getting an asset.css file. You are telling it to build from the src/assets directory but then telling it to ignore the whole src directory. That seems like it would be problematic.

bryantp commented 8 years ago

That indeed would be a problem. I moved some of my sass files that were under src and put them into app. So, there is no need to look into src anymore. I tried updating it too look into src/app and src/assets, but I am no longer generating any other css files besides vendor.

updated syles.js

var path = require('path');
const gulp = require('gulp');
const browserSync = require('browser-sync');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');

const conf = require('../conf/gulp.conf');
var $ = require('gulp-load-plugins')();

gulp.task('styles', styles)

var input = '*.scss';
console.log("============ " + conf.paths.src);
 var injectFiles = gulp.src([
    path.join(conf.paths.src, '/**/*.scss'),
    path.join('!' + conf.paths.src, 'app/index.scss')

  ], { read: false });

var injectOptions = {
    transform: function(filePath) {
        console.log("filePath==========   " + filePath);
      filePath = filePath.replace(conf.paths.src + '/', '');
      return '@import "' + filePath + '";';
    },
    starttag: '// injector',
    endtag: '// endinjector',
    addRootSlash: false
  };

function styles() {
  return gulp.src(conf.path.src('app/index.scss'))
       .pipe($.inject(injectFiles, injectOptions))
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'})).on('error', conf.errorHandler('Sass'))
    .pipe(postcss([autoprefixer()])).on('error', conf.errorHandler('Autoprefixer'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(conf.path.tmp()))
    .pipe(browserSync.stream());
}

updated index.html

<!doctype html>
<html>
  <head>
    <base href="/">
    <meta charset="utf-8">
    <title>FountainJS</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />

      <!-- build:css({src}) styles/vendor.css -->
    <!-- bower:css -->
    <!-- run `gulp inject` to automatically populate bower styles dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({src/app}) styles/app.css -->
    <!-- endbuild -->

    <!-- build:css({src/assets}) styles/asset.css -->
    <!-- endbuild -->

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

jonkemp commented 8 years ago

Unless these are getting populated somehow, they are empty.

    <!-- build:css({src/app}) styles/app.css -->
    <!-- endbuild -->

    <!-- build:css({src/assets}) styles/asset.css -->
    <!-- endbuild -->

Nothing will get output unless you add your link tags in there with the path to your stylesheets.

bryantp commented 8 years ago

I was under the assumption that it would search for the files and add them in? In other words, find all my Sass files and turn them into the minified and concatenated css file.

jonkemp commented 8 years ago

No, it doesn't work that way. Please refer to the documentation.

https://github.com/jonkemp/useref#usage https://github.com/jonkemp/gulp-useref#usage

In addition, other plugins are required to do anything other than concatenate the assets. So you would need to process the sass files first before running useref.

bryantp commented 8 years ago

That worked. I had to modify the inject task to find the files. Thanks for your help.

jonkemp / gulp-useref

Only generates 2 files #218