search

jamesknelson / gulp-rev-replace

Rewrite occurences of filenames which have been renamed by gulp-rev
MIT License
389 stars 62 forks source link

preprocessor file generation and useref #19

Open minimit opened 9 years ago

minimit commented 9 years ago

Hello, I'm using this code, and basically the main.css is a .less file compiled, but also if I generate it in /src and get it useref(), the code gets executed before the .css is generated, and it gives an error. If I put an empty main.css it gets compiled before the preprocessor. Any way to to it? thanks

<!-- build:css css/main.css -->
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
<!-- build:js js/main.js -->
<script type="text/javascript" src="js/main.js"></script>
<!-- endbuild -->

// Concatenate & Minify JS
gulp.task('js', function() {
    gulp.src(src + 'js/**/*.js')
        .pipe(concat('main.js'))
        .pipe(gulp.dest(dest + 'js'))
        .pipe(gulp.dest(src+ 'js'));
        .pipe(rename('main.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(dest + 'js'));
        .pipe(gulp.dest(src+ 'js'));
});

// Compile Less
gulp.task('less', function() {
    gulp.src(src + 'less/**/*.less')
        .pipe(less())
        .pipe(concat('main.css'))
        .pipe(gulp.dest(dest + 'css'))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest(dest + 'css'));
});

// Html Injects
gulp.task('html', function() {
    var assets = useref.assets();
    var jsFilter = filter(src + 'js/**/*.js');
    var cssFilter = filter(src + 'css/**/*.css');
    gulp.src(src + "**/*.html")
        .pipe(assets)
        // js
        .pipe(jsFilter)
        .pipe(uglify())
        .pipe(gulp.dest(dest + 'css'))
        .pipe(jsFilter.restore())
        // css
        .pipe(cssFilter)
        .pipe(less())
        .pipe(minifycss())
        .pipe(gulp.dest(dest + 'css'))
        .pipe(cssFilter.restore())
        // rev
        .pipe(rev())
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(revReplace())
        // dest
        .pipe(embedlr())
        .pipe(gulp.dest(dest));
});
Chalkin commented 9 years ago

Thats how you can do it:

var gulp                = require('gulp');
var plugins             = require('gulp-load-plugins')();
var del                 = require('del');

/** Production **/

gulp.task('production', function(cb) {
    plugins.runSequence('clean', 'styles-prod', 'scripts-prod', 'clean-tmp', cb);
});

gulp.task('scripts-prod', function() {

    var jsFilter = plugins.filter('**/*.js');
    var cssFilter = plugins.filter('**/*.css');
    var userefAssets = plugins.useref.assets();

    return gulp.src('app/index.html')
        .pipe(userefAssets)
        .pipe(jsFilter)
        .pipe(plugins.uglify())
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe(cssFilter.restore())
        .pipe(plugins.rev())
        .pipe(userefAssets.restore())
        .pipe(plugins.useref())
        .pipe(plugins.revReplace())
        .pipe(gulp.dest('distfolder');
});

gulp.task('styles-prod', function () {
    return gulp.src(paths.vendorCss.concat('app/less/main.less'))
        .pipe(plugins.if(/less$/, plugins.less()))
        .pipe(plugins.concat('app.css'))
        .pipe(plugins.minifyCss())
        .pipe(gulp.dest('tmp/css'));
});

node.js

gulp-rev
gulp-rev-replace
gulp-run-sequence
del
gulp-concat
gulp-less
gulp-useref

index.html

<!doctype html>
<html ng-app="app" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular App</title>

    <!-- build:css css/main.css -->
    <link rel="stylesheet" href="../tmp/css/app.css"/>
    <!-- endbuild -->
</head>
<body>
    <aside ng-include="'views/layouts/partials/nav.html'" id="main-header"></aside>
    <div ui-view></div>

    <!-- build:js js/app.js -->
    <script type="text/javascript" src="js/app.js"></script>
    <!-- endbuild -->

    <!-- build:js js/vendor1.js -->
    <script type="text/javascript" src="../vendor/bower_components/angular/angular.js"></script>
    <script type="text/javascript" src="../vendor/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <!-- endbuild -->
</body>
</html>