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

usemin detecta index.html e seu .css e .js porem não funciona em outras paginas.

Boa tarde,

Segui as aulas ate a parte em que o professor utiliza o plugin usemin, adicionei os comentários necessários nos html dentro de src conforme exemplo do vídeo, porem ao executar npm run gulp ele processa apenas a pagina index.html, criando os arquivos index.min.css e index.min.js, as demais paginas não sofrem qualquer alteração e não é notificado qualquer erro, poderiam ajudar ?

Segue arquivo gulpfile.js (Igual o do professor)

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');

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

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

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

gulp.task('build-img', function() {

  return gulp.src('dist/img/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
});

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

Comentários que adicionei na src/index.html que funciona.

    <!-- build:css css/index.min.css -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/mobile.css">
    <!--endbuild-->

  <!-- build:js js/index.min.js -->
  <script src="js/jquery.js"></script>
  <script src="js/home.js"></script>
  <!--endbuild-->

Comentários que adicionei no src/produto.html que não esta funcionando.

    <!-- build:css css/produto.min.css -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/mobile.css">
    <link rel="stylesheet" href="css/produto.css">
    <!--endbuild-->

    <!-- build:js js/produto.min.js -->
    <script src="js/jquery.js"></script>
    <script src="js/produto.js"></script>
    <!--endbuild-->

Obs: O mesmo processo que fiz no index.html que funciona fiz nos outros arquivos .html modificando apenas o nome, mais não tem nenhum efeito, apenas no index.

Segue imagem do cmd do windows quando executo:

[15:25:38] Using gulpfile F:\Xampp\htdocs\projeto\gulpfile.js
[15:25:38] Starting 'clean'...
[15:25:38] Finished 'clean' after 24 ms
[15:25:38] Starting 'copy'...
[15:25:38] Finished 'copy' after 95 ms
[15:25:38] Starting 'default'...
[15:25:38] Starting 'build-img'...
[15:25:38] Starting 'usemin'...
[15:25:38] Finished 'default' after 58 ms
[15:25:42] gulp-imagemin: Minified 32 images (saved 181.07 kB - 8.7%)
[15:25:42] Finished 'build-img' after
PS F:\Xampp\htdocs\projeto>
1 resposta
solução!

Boa noite a todos,

Consegui resolver o problema,

Ao invés de usar o código dessa maneira:

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

Modifiquei para:

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

Resumindo: a unica mudança que fiz foi tirar () das funções, então ao invés de deixar uglify() deixei apenas uglify e funcionou em todos os arquivos.

Obrigado a todos.