Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Stephen O'Connor
Stephen O'Connor
22,291 Points
Posted by Stephen O'Connor
Stephen O'Connor
22,291 Points

Struggling with gulp-useref...

I have worked through both the Gulp Basics course and the Using Gulp's 'gulp-useref' For a Full Build Pipeline workshop and I am trying to create a gulp file that will work with my usual install of the CMS ProcessWire.

I can't seem to get gulp-useref to work (when running gulp html in iTerm2) when the files gulp.src gets are in a subdirectory. I'll try and explain further.

If I have this folder structure it works and creates a css and js directory with the appropriate 'application.min.css' and 'application.min.js' files in them.

--| node_modules
--| src
     --| assets
          --| fonts
          --|images
     --| js
     --| scss
          --| 3rd-party
          --| base
          --| layout
          --| modules
          application.scss
     index.html
.gitignore
gulpfile.js
package.json

Here is my the html task in my gulp file that works:

var gulp = require('gulp'),
      uglify = require('gulp-uglify'),
      rename = require('gulp-rename'),
        sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
      useref = require('gulp-useref'),
      gulpif = require('gulp-if'),
        csso = require('gulp-csso'),
         del = require('del');

var options = {
  src: 'src',
  dist: 'dist'
};

gulp.task('compileSass', function() {
  return gulp.src(options.src + "/scss/application.scss")
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(options.src + '/css'));
});

gulp.task('html', ['compileSass'], function() {
  var assets = useref.assets();
  gulp.src(options.src + '/index.html')
    .pipe(assets)
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', csso()))
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(gulp.dest(options.dist));
});

But who has an index.html file anymore? I certainly haven't used one in a full format for years, it always consists of partials included via php includes.

If I have this folder structure it doesn't work and only creates a dist folder with the includes in it, no css or js directory and no css or js files.

--| node_modules
--| src
     --| assets
          --| fonts
          --|images
     --| js
     --| partials
         header.inc
         footer.inc
     --| scss
          --| 3rd-party
          --| base
          --| layout
          --| modules
          application.scss
.gitignore
gulpfile.js
package.json

Here is my the html task in my gulp file that doesn't work:

var gulp = require('gulp'),
      uglify = require('gulp-uglify'),
      rename = require('gulp-rename'),
        sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
      useref = require('gulp-useref'),
      gulpif = require('gulp-if'),
        csso = require('gulp-csso'),
         del = require('del');

var options = {
  src: 'src',
  dist: 'dist'
};

gulp.task('compileSass', function() {
  return gulp.src(options.src + "/scss/application.scss")
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(options.src + '/css'));
});

gulp.task('html', ['compileSass'], function() {
  var assets = useref.assets();
  gulp.src([options.src + '/partials/header.inc', options.src + '/partials/footer.inc'])
    .pipe(assets)
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', csso()))
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(gulp.dest(options.dist));
});

In my header.inc and footer.inc files I have the following flags:

header.inc

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

footer.inc

<!-- build:js js/application.min.js -->
     <script src="js/script-1.js"></script>
     <script src="js/script-2.js"></script>
<!-- endbuild -->

I know it is long winded but hopefully I have explained myself well enough for someone to point me in the direction of what is going wrong.

Thanks.

vinay prajapati
vinay prajapati
Courses Plus Student 1,140 Points

good

5 Answers

Fynn Lehnert
Fynn Lehnert
15,244 Points
Fynn Lehnert
Fynn Lehnert
15,244 Points

useref was upaded a while ago and their syntax changed ( stupid right? but to be fair it was in version 2. everything changes with version 3! alsways. anyhow....) you have to use theier updated syntax: https://www.npmjs.com/package/gulp-useref

For a simple configuration, you can replace this V2 code:

var gulp = require('gulp'),
    useref = require('gulp-useref');

gulp.task('default', function () {
    var assets = useref.assets();

    return gulp.src('app/*.html')
        .pipe(assets)
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

with this V3 code:

var gulp = require('gulp'),
    useref = require('gulp-useref');

gulp.task('default', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});
Stephen O'Connor
Stephen O'Connor
22,291 Points
Stephen O'Connor
Stephen O'Connor
22,291 Points

Thanks Fynn. I am not getting any errors though, that's why I am not sure if I need the new syntax ...?

vinay prajapati
PLUS
vinay prajapati
Courses Plus Student 1,140 Points
vinay prajapati
vinay prajapati
Courses Plus Student 1,140 Points

Sir I Vinay Prajapati help me At the bottom of this CSS file is a media query. Inside the media query, create a selector that chooses all list items that are nested inside the element with the id of "gallery". Then, inside your newly written selector, set the width property to a value of 28.3333%.

Stephen O'Connor
Stephen O'Connor
22,291 Points
Stephen O'Connor
Stephen O'Connor
22,291 Points

I've got it working. My header. inc and footer.inc file flags were wrong ... they should have been:

header.inc

<!-- build:css(src) css/application.min.css -->
     <link rel="stylesheet" href="css/application.css">
<!-- endbuild -->

footer.inc

<!-- build:js(src) js/application.min.js -->
     <script src="js/script-1.js"></script>
     <script src="js/script-2.js"></script>
<!-- endbuild -->

I am away to have a stiff drink!

Thanks.

Fynn Lehnert
Fynn Lehnert
15,244 Points

awesome!! opened up a bottle of wine my self :D helps to easy the brain. have a great day!

vinay prajapati
vinay prajapati
Courses Plus Student 1,140 Points

Thanks & sir how many years experience of development???

Dmitri Jurovski
Dmitri Jurovski
3,106 Points
Dmitri Jurovski
Dmitri Jurovski
3,106 Points

How use uglify and useref? ''' gulp.task('html', function() { return gulp.src(options.src + '/index.html') .pipe(useref()) //.pipe(uglify()) .pipe(gulp.dest(options.dist)); }); '''