V
V
Vladimir Ionenko2016-09-22 16:03:06
HTML
Vladimir Ionenko, 2016-09-22 16:03:06

Building a gulp project, how to make wiredep and userref friends if .html files are in different folders?

When building the project, there were difficulties, there is such a file structure:
8872a23aeaae4015b18e480113354d00.PNG
I use the Jade preprocess, when compiling html files, wiredep automatically prescribes the paths to the bower libraries, everything works until you try to build the project. Due to the fact that the .jade files are in different folders, files are created in html during compilation while maintaining the folder structure. Paths to bower components are written in files, but since some files are in separate folders, relative paths are set for them. And when you try to build, userref swears on the path to the files of those files that are in folders and have relative paths.
Assembly

gulp.task('build',['clean'], function () {
    return gulp.src('src/*.html')
        .pipe(useref({searchPath: './src/'}))
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', minifyCss()))
        .pipe(gulp.dest('dist'));
});
/*-------------clean--------*/
gulp.task('clean', function () {
    return gulp.src('dist', {read: false})
        .pipe(clean());
});

Working with jade
gulp.task('pug', function buildHTML() {
  return gulp.src(['./src/jade/**/*.pug','!./src/jade/**/_*.pug'])
  .pipe(pug({
    pretty: true
  }).on('error', pugErrorHandler))
 .pipe(wiredep({
    directory : "src/bower/",
    ignorePath: '../',
    }))
  .pipe(gulp.dest('src'))
});

Actually, what is the question, is it possible to specify several values ​​in ignorePath: '../' for wiredep?
for files at the root, the path is written like this
<link rel="stylesheet" href="bower/select2/dist/css/select2.min.css" />

and for files that are in folders like this
<link rel="stylesheet" href="../bower/select2/dist/css/select2.min.css" />

How to make userref find correct paths in all html files during build?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vladimir Ionenko, 2016-09-23
@ionenkovladimir

Thanks for the advice. I found a solution that may be useful to you or someone:
wiredep, you can specify several parameters

.pipe(wiredep({
    directory : "src/bower/",  // Путь к вашим бовер компонентам 
    ignorePath: '../',  // Игнорирует указанный путь 
    }))

And for userref I specified the following:
.pipe(useref({
          searchPath: './src/', //Ищет данную папку
          transformPath: function(filePath) {
                return filePath.replace('../','/') // Меняет путь на который указан вторым параметром
            }
        }))

Thus, I organized the work of these plugins with a folder structure that is convenient for me. The paths are valid, at least for me =)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question