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

Using sass and rev without temp files #174

Open navarroaxel opened 8 years ago

navarroaxel commented 8 years ago

Hi!

I'm using this plugin in conjunction with gulp-sass, gulp-rev and gulp-rev-replace. And today I'm storing the generated CSS file in a temp folder. It's the only way I found to apply the rev() to the css files.

I have tried to use the additionalStreams option but is not working for me.

Please, can you provide me a example gulpfile without temp CSS files? There is a way or a new feature?

My index.html important fragments:

<!-- build:css(.tmp) css/site.css -->
<link rel="stylesheet" href="css/site.css">
<!-- endbuild -->
<!-- build:js(bower_components) js/vendor.js -->
<script src="angular/angular.min.js"></script>
<!-- endbuild -->
<!-- build:js(public) js/app.js -->
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<!-- endbuild -->

My gulpfile.js

gulp.task('sass:dist', () => {
    var sass = require('gulp-sass');

    return gulp.src(config.sass.src)
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(gulp.dest('.tmp/css'));
});

gulp.task('useref', ['sass:dist'], () => {
    var pkg = require('../package'),
        gulpif = require('gulp-if'),
        useref = require('gulp-useref'),
        htmlmin = require('gulp-htmlmin'),
        uglify = require('gulp-uglify'),
        rev = require('gulp-rev'),
        revReplace = require('gulp-rev-replace'),
        replace = require('gulp-replace');

    return gulp.src(['public/views/index.html', 'public/views/signin.html'])
        .pipe(replace('@version', pkg.version))
        .pipe(useref())
        .pipe(gulpif('**/*.js', uglify()))
        .pipe(gulpif(['**/*.js', '**/*.css'], rev()))
        .pipe(revReplace())
        .pipe(gulpif(['**/*.js', '**/*.css'], gulp.dest('dist/public')))
        .pipe(gulpif('*.html', htmlmin(config.htmlmin.options)))
        .pipe(gulpif('*.html', gulp.dest('dist/public/views')));
});

Thanks!