H
H
HamSter2016-07-08 13:49:07
JavaScript
HamSter, 2016-07-08 13:49:07

How to build userref and wiredep scripts and styles and also hash gulp-hash?

gulpfile.js:

'use strict';

var gulp         = require('gulp'),
    jade         = require('gulp-jade'),    
    sass         = require('gulp-sass'),
    minifyCss    = require('gulp-minify-css'),
    uncss        = require('gulp-uncss'),
    useref       = require('gulp-useref'),
    hash         = require('gulp-hash'),
    replace      = require('gulp-replace'),
    wiredep      = require('wiredep').stream;

// Пути
var path = {
    app : {          // Исходники
        html   : 'dist/*.html',
        jade   : 'app/*.jade',
        js     : 'app/js/**/*.js'       
    },
    dist : {         // Релиз
        html   : 'dist/',       
        js     : 'dist/js/'
    },
    watch : {        // Наблюдение
        jade   : 'app/**/*.jade',
        html   : 'dist/**/*.html',
        js     : 'app/js/**/*.js'   
    }
};

// Работа с JADE
gulp.task('jade', function() {  
    gulp.src(path.app.jade)
        .pipe(jade({
            pretty: '\t',
        }))        
        .pipe(gulp.dest(path.dist.html));
});

// Работа с HTML
gulp.task('html', ['js'], function(){
    var assets = require('./tmp/assets.json');
    gulp.src(path.app.html)
        .pipe(wiredep())        
        .pipe(replace('main.js', assets['main.js']))
        .pipe(useref())         
        .pipe(gulp.dest(path.dist.html));
});

// Работа с JS
gulp.task('js', function(){
    return gulp.src(path.app.js)
        .pipe(hash())
        .pipe(gulp.dest(path.dist.js))
        .pipe(hash.manifest('assets.json')) 
        .pipe(gulp.dest('tmp'));
});

// Наблюдение
gulp.task('watch', function () {    
    gulp.watch(path.watch.jade, ['jade']); 
    gulp.watch(path.watch.html, ['html']);
    gulp.watch(path.watch.js, ['js']); 
});

// Задачи по-умолчанию
gulp.task('default', [  
    'jade', 
    'html',
    'js'
]);

Project structure: * as it should be
- app
  |__ bower
  |    |__ jquery ...
  |__ js
  |    |__ main.js
  |    |__ plugin.js
  |__ index.jade
- dist
  |__ js
  |    |__ main-0aff1519.js
  |    |__ vendor-0aff1519.js
  |__ index.html

index.jade:
... 

body   

    block content

    //- Сбор js ф-ов установленных bower в один - vendor.js
    // build:js js/vendor.js
    // bower:js
    // endbower
    // endbuild        

    //- Сбор js ф-ов в один - main.js
    // build:js js/main.js
    script(src='js/main.js')
    script(src='js/plugin.js')
    // endbuild

Question:
--> How to fix .pipe(replace('main.js', assets['main.js']))to "hash" all files in the js folder?
--> How to properly build in index.jade\gulpfile.js
// build:js js/main.js
script(src='js/main.js')
script(src='js/parallax.min.js')
// endbuild

?
Because at the moment it gives an error:
Error: File not found with singular glob: C:\Users\Khomka\desktop\test\dist\js\parallax.min.js

In general, something is confused, maybe someone can help figure out what to fix!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
H
HamSter, 2016-07-14
@HamSter007

If anyone needs it, I solved the problem with the gulp-replace-assets plugin .
The complete assembly now looks like this.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question