Gulp - Lidando com latência e banda - Video 3 -Erro da execução da tarefa 'default' do Gulp

Olhando seu log, aparece haver um erro de digitação. Esta escrito \dis t, o correto é dist. Dê uma verifica no seu script.

Ela deixa bem clara (traduzindo para o português) o erro:

Error: ENOENT: no such file or directory, open 'C:\Alura\01-capitulo\projeto\dis t\index.html'

Traduzindo:

Error: ENOENT: nenhum arquivo ou diretório, abrindo 'C:\Alura\01-capitulo\projeto\dis t\index.html'

Foi aqui que eu vi o diretório estranho.

Olá Flávio! Obrigado pelo resposta! Não encontrei o path incorreto no meu código,apenas para reafirmar, o erro só ocorre quando executo a tarefa 'default',se executo as tarefas que compõem a 'default' separadamente não acontece esse problema , segue abaixo:

var gulp =require('gulp'),//look for a folder named 'gulp' in the node_modules folder
    imagemin = require('gulp-imagemin');//gulp-imagemin in the node_modules folder
    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', 'build-js', 'build-html');
    gulp.start('build-img', 'usemin');

});

gulp.task('clean', function() {
    // var stream = gulp.src('dist')
    //     .pipe(clean());
    // return stream;//to make clean sincronous   
       return gulp.src('dist')
            .pipe(clean());

});    

gulp.task('copy',['clean'], function(){ //['clean'] is the task depedency, wich means this task is executed before 'copy'

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

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

   gulp.src('dist/img/**/*')//1 * for all files and 2* for all folders
        .pipe(imagemin()) // pipe conects source and target
        .pipe(gulp.dest('src/img'));
});

gulp.task('usemin', function() {

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

Pois é, a mensagem de erro ficou truncada o que me levou a fazer esse comentário. Mas olhando seu código já descobri o que é e vou explicar.

Taks do gulp são assíncronas e se você quer que uma task espere a outra terminar é necessário colocar um return. Lembra da nossa aula? Então, seu código esta assim:

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

   gulp.src('dist/img/**/*')//1 * for all files and 2* for all folders
        .pipe(imagemin()) // pipe conects source and target
        .pipe(gulp.dest('src/img'));
});

Faltou um return! Dai..ele começa a executar antes do copy terminar.. por isso ele diz que o diretório não existe.

Tenta lá meu aluno! Aguardo seu retorno!

Coloquei return no trecho indicado e não funcionou, Então resolvi apelar e colocar return para todas as tasks, e também sem sucesso:

var gulp =require('gulp'),//look for a folder named 'gulp' in the node_modules folder
    imagemin = require('gulp-imagemin');//gulp-imagemin in the node_modules folder
    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', 'build-js', 'build-html');
        gulp.start('build-img', 'usemin');

});

gulp.task('clean', function() {
    // var stream = gulp.src('dist')
    //     .pipe(clean());
    // return stream;//to make clean sincronous   
       return gulp.src('dist')
            .pipe(clean());

});    

gulp.task('copy',['clean'], function(){ //['clean'] is the task depedency, wich means this task is executed before 'copy'

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

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

   return gulp.src('dist/img/**/*')//1 * for all files and 2* for all folders
        .pipe(imagemin()) // pipe conects source and target
        .pipe(gulp.dest('src/img'));
});

gulp.task('usemin', function() {

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

Hum, mistério. A gente descobre. Esse é o seu último script, certo? A mensagem de erro continua do jeito que estava, certo?

Aproveitando a oportunidade, tentei utilizar alguns plugins para fzer resize e crop de imagens via Gulp, porém quebrei a cabeça e nada! Você poderia me indicar plugin e materiais para que eu possa estudar sobre? ObrigadO!

Correto o script se mantem igual e mensagem de erro também!

Não vi onde você errou ainda, mas pode ficar tranquilo que mais de 500 alunos já passaram dessa parte sem problema algum.

Cole a mensagem de erro para mim, mais uma vez.

Resolvi, copiar o seu código resolvido e funcionou!!! =) Mas de qualquer forma , segue a mensagem de erro com o meu script. Aproveitando a oportunidade, tentei utilizar alguns plugins para fzer resize e crop de imagens via Gulp, porém quebrei a cabeça e nada! Você poderia me indicar plugin e materiais para que eu possa estudar sobre? Obrigado!

[12:58:12] Using gulpfile C:\Alura\01-capitulo\projeto\gulpfile.js [12:58:12] Starting 'clean'... [12:58:12] Finished 'clean' after 41 ms [12:58:12] Starting 'copy'... [12:58:12] Finished 'copy' after 130 ms [12:58:12] Starting 'default'... [12:58:12] Starting 'clean'... [12:58:12] Starting 'usemin'... [12:58:12] Finished 'default' after 71 ms events.js:154 throw er; // Unhandled 'error' event ^

Error: ENOENT: no such file or directory, open 'C:\Alura\01-capitulo\projeto\dis t\index.html' at Error (native) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! lesson1@1.0.0 gulp: gulp npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the lesson1@1.0.0 gulp script 'gulp'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the lesson1 package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! gulp npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs lesson1 npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls lesson1 npm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Azevedo\AppData\Roaming\npm-cache_logs\2017-04-11T15_58_1 2_893Z-debug.log

Sua task de imagem esta com uma dependência de copy que não deveria existir, esse é o problema.

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

   return gulp.src('dist/img/**/*')//1 * for all files and 2* for all folders
        .pipe(imagemin()) // pipe conects source and target
        .pipe(gulp.dest('src/img'));
});

O correto é

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

   return gulp.src('dist/img/**/*')//1 * for all files and 2* for all folders
        .pipe(imagemin()) // pipe conects source and target
        .pipe(gulp.dest('src/img'));
});

Esse era o problema.

Tem o cara que era bem usado, o

https://www.npmjs.com/package/gulp-image-resize

Talvez seja um cara interessante a ver visto.

Era a task 'build-img' com problemas mesmo!

Muito obrigado Flávio! Parabéns pelo conteúdo!