Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Inline-source Gulp

Sérgio, boa tarde. Não utilzo o Grunt e sim o Gulp, tentei utilizar o inline-source mas não tive sucesso, você poderia dar uma analisada e verificar o que pode estar errado, desde já agradeço.

Obs. No terminal não ocorre nenhum errado, ele simplesmente gera o arquivo html na pasta dist porém o código não aparece no html inline.

var gulp = require('gulp'),
        imagemin = require('gulp-imagemin'),
        clean = require('gulp-clean'),
        concat = require('gulp-concat'),
        htmlReplace = require('gulp-html-replace'),
        uglify = require('gulp-uglify'),
        usemin = require('gulp-usemin'),
        cssmin = require('gulp-cssmin'),
        browserSync = require('browser-sync'),
        jshint = require('gulp-jshint'),
        jshintStylish = require('jshint-stylish'),
        csslint = require('gulp-csslint'),
        autoprefixer = require('gulp-autoprefixer'),
        less = require('gulp-less'),
        inlinesource = require('gulp-inline-source');

         gulp.task('default', ['copy'], function() {
         gulp.start('build-img', 'usemin', 'inlinesource');
     });

gulp.task('copy', ['clean'], function() {
  return gulp
    .src([
      'src/**/*',         
      '!src/**/less',
      '!src/**/less/*'
    ])
    .pipe(gulp.dest('dist'));
});

gulp.task('clean', function() {
    return gulp.src('dist')
    .pipe(clean());
});

gulp.task('build-img', function() {
    gulp.src('dist/img/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
});

gulp.task('usemin', function() {
    gulp.src('dist/**/*.html')
    .pipe(usemin({
        'js' : [uglify],
        'css' : [autoprefixer, cssmin]
    }))
    .pipe(gulp.dest('dist'));
});

gulp.task('inlinesource', function () {
  return gulp.src('src/*.html')
  .pipe(inlinesource())
  .pipe(gulp.dest('dist'));
});

gulp.task('server', function() {
    browserSync.init({
        server: {
            baseDir: 'src'
        }
    });

gulp.watch('src/js/*.js').on('change', function(event) {
    gulp.src(event.path)
    .pipe(jshint())
    .pipe(jshint.reporter(jshintStylish));
});

gulp.watch('src/css/*.css').on('change', function(event) {
    gulp.src(event.path)
    .pipe(csslint())
    .pipe(csslint.reporter());
});

gulp.watch('src/less/*.less').on('change', function(event) {
    gulp.src(event.path)
    .pipe(less())
    .pipe(gulp.dest('src/css'));
});

gulp.watch('src/**/*').on('change', browserSync.reload);

});
1 resposta
solução!

Há um conflito entre as tarefas inlinesource e usemin. Quando o comando gulp.start inicializa essas tarefas, elas alteram os mesmos arquivos html e ambas rodam ao mesmo tempo em paralelo.

Solução 1, colocar o inline dentro do usemin:

...
gulp.task('default', ['copy'], function() {
   gulp.start('build-img', 'usemin');
});
...
gulp.task('usemin', function() {
    gulp.src('dist/**/*.html')
    .pipe(inlinesource())
    .pipe(usemin({
        'js' : [uglify],
        'css' : [autoprefixer, cssmin]
    }))
    .pipe(gulp.dest('dist'));
});
...

Solução 2, rodar o inlinesource antes do usemin:

...
gulp.task('default', ['copy'], function() {
   gulp.start('build-img', 'usemin');
});
...
gulp.task('usemin', ['inlinesource'], function() {
    gulp.src('dist/**/*.html')
    .pipe(usemin({
        'js' : [uglify],
        'css' : [autoprefixer, cssmin]
    }))
    .pipe(gulp.dest('dist'));
});
...

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software