jonkemp / gulp-useref

Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
MIT License
705 stars 93 forks source link

Replacing build block, but not creating file #199

Closed alquist42 closed 8 years ago

alquist42 commented 8 years ago

a simple task: gulp.task('packref', function(){ return gulp.src(path.dist.php, { base: path.dist.root }) .pipe(useref()) .pipe(gulp.dest(path.dist.root)) .on('end', function(){ gutil.log('Packages combined and ready....'); }); }); and some simple block: `

` Looks like the plugin sometimes has its own will... The build can pass. But mostly doesn't with no error (just not writing the file). Only in this file... and if I change the file name the build can pass. **How can this happen?** Thank you!
jonkemp commented 8 years ago

This looks like a bug report. In order to be as helpful as possible, here are some guidelines for bug reports:

  1. Use the GitHub issue search — check if the issue has already been reported.
  2. Check if the issue has been fixed — try to reproduce it using the latest master or development branch in the repository.
  3. Isolate the problem — create a reduced test case and a live example.

A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? What would you expect to be the outcome? All these details will help people to fix any potential bugs. Thanks!

jonkemp commented 8 years ago

No response.

philgruneich commented 7 years ago

I'm struggling to generate a css file in a complex file structure:

.tmp
   index.html
   header.html
   footer.html
    scripts
         main.js
    styles
         main.css
sites
    project
         gulpfile.js
         .tmp
             styles
                  theme.css
             scripts
                  theme.js

These are all the relevant parse blocks from the index.html file:

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

    <!-- build:css styles/theme.css -->
    <link rel="stylesheet" href="styles/theme.css">
    <!-- endbuild -->

    ...

    <!-- build:js scripts/main.js -->
    <script src="scripts/main.js"></script>
    <!-- endbuild -->

    <!-- build:js scripts/custom.js -->
    <script src="scripts/theme.js"></script>
    <!-- endbuild -->

Running the following gulp task, a variation from yeoman's webapp generator:

gulp.task('html', ['template:includes', 'styles', 'styles:main', 'scripts', 'scripts:main'], () => {
  return gulp.src('../../.tmp/index.html')
    .pipe($.useref({searchPath: ['.tmp', '../../.tmp', '.', '../..']}))
    .pipe($.debug())
    .pipe($.if('*.js', $.uglify().on('error', $.util.log)))
    .pipe($.if('*.css', $.postcss([cssnano({safe: true, autoprefixer: false})])))
    .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
    .pipe(gulp.dest('dist'));
});

The relevant output from gulp-debug is:

[11:00:09] gulp-debug: ../../.tmp/index.html
[11:00:09] gulp-debug: ../../.tmp/styles/theme.css
[11:00:09] gulp-debug: ../../.tmp/scripts/main.js
[11:00:09] gulp-debug: ../../.tmp/scripts/custom.js

And the result in the dist folder is:

index.html
scripts
    main.js
    custom.js
styles
    theme.css

And the (not minified) output for the index.html file in the dist folder is:

<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/theme.css">

The problem is that gulp-useref skips creating the main.css file in the dist folder. However, it does generate the main.js file correctly, so I'm clueless for what could be the issue. No errors thrown. I tried changing file and folder names to, perhaps, resolve a conflict in the search path, but nothing stuck.

philgruneich commented 7 years ago

I found a workaround defining the alternative search path in the missing main.css parse block; however, I still think this is a bug.

So this:

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

Becomes this:

    <!-- build:css(../../.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

Using this gulp task:

gulp.task('html', ['template:includes', 'styles', 'styles:main', 'scripts', 'scripts:main'], () => {
  return gulp.src('../../.tmp/index.html')
    .pipe($.useref({searchPath: ['../../.tmp', '../..', '.tmp']}))
    .pipe($.if('*.js', $.uglify().on('error', $.util.log)))
    .pipe($.if('*.css', $.postcss([cssnano({safe: true, autoprefixer: false})])))
    .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
    .pipe(gulp.dest('dist'));
});

Please notice how the first path from the searchPath in the gulp task IS exactly the path I must define inline to get it to work.