Gulp командная строка не работает после выполнения команды gulp?

Question

[tory_kuzya]

Установила Gulp, создала учебный проект, настроила gulpfile.js и package.json, при выполнении команды gulp в командной строке получаю следующее:

Курсор стоит, мигает, а вводить команды не дает. Что я делаю? Закрываю и открываю вновь командную строку. И так каждый раз... Что не так? Вот структура проекта.

Вроде все таски отработали, но имеющиеся изображения в папке app/img не были перенесены в итоговую папку dist/img...

Comments

[iBird Rose]

и толку от твоего скрина? весь код где?
p.s. а вообще у тебя запускается сервер. ясное дело при работе сервера нельзя ничего вводить в консоль.

[sergey]

Что удалось увидеть со скрина: пути в тасках для build почему-то в папку app ведут, это же исходники...

[sim3x]

Код и текст ошибок вставьте текстом в тег code

Спасибо

[tory_kuzya]

iBird Rose: Я выполнила команду gulp, она отработала, результат на скрине. А дальше ничего не происходит, курсор мигает, не дает ничего вводить.

[tory_kuzya]

Sagan: В app у меня исходники, в дист - готовые файлы. Может и напутала чего, но пока так

[tory_kuzya]

gulpfile.js

var gulp       = require('gulp'), // Подключаем Gulp
    less         = require('gulp-less'), //Подключаем less пакет,
    browserSync  = require('browser-sync'), // Подключаем Browser Sync
    concat       = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
    uglify       = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS)
    cssnano      = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
    rename       = require('gulp-rename'), // Подключаем библиотеку для переименования файлов
    del          = require('del'), // Подключаем библиотеку для удаления файлов и папок
    imagemin     = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
//  pngquant     = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
// cache        = require('gulp-cache'), // Подключаем библиотеку кеширования
    autoprefixer = require('gulp-autoprefixer');// Подключаем библиотеку для автоматического добавления префиксов           npm install gulp-uglifyjs --save-dev

var csso = require('gulp-csso'),
    rigger = require('gulp-rigger');    //плагин позволяет хранить статичные части сайта, такие как header, footer, aside
gulp.task('less', function(){ // Создаем таск Less
    return gulp.src('app/less/**/*.less') // Берем источник
        .pipe(less()) // Преобразуем Less в CSS посредством gulp-less
        .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) // Создаем префиксы
        .pipe(gulp.dest('app/css')) // Выгружаем результата в папку app/css
        .pipe(browserSync.reload({stream: true})) // Обновляем CSS на странице при изменении
});

gulp.task('browser-sync', function() { // Создаем таск browser-sync
    browserSync({ // Выполняем browserSync
        server: { // Определяем параметры сервера
            baseDir: 'app' // Директория для сервера - app
        },
        notify: false // Отключаем уведомления
    });
});

gulp.task('scripts', function() {
    return gulp.src([ // Берем все необходимые библиотеки
        'app/libs/jquery/jquery-3.2.1.min.js'//, // Берем jQuery
       // 'app/libs/magnific-popup/dist/jquery.magnific-popup.min.js' // Берем Magnific Popup
    ])
        .pipe(concat('libs.min.js')) // Собираем их в кучу в новом файле libs.min.js
        .pipe(uglify()) // Сжимаем JS файл
        .pipe(gulp.dest('app/js')); // Выгружаем в папку app/js
});

gulp.task('css-libs', ['less'], function() {
    return gulp.src('app/css/libs.css') // Выбираем файл для минификации
        .pipe(cssnano()) // Сжимаем
        .pipe(rename({suffix: '.min'})) // Добавляем суффикс .min
        .pipe(gulp.dest('app/css')); // Выгружаем в папку app/css
});

gulp.task('watch', ['browser-sync', 'css-libs', 'scripts'], function() {
    gulp.watch('app/less/**/*.less', ['less']); // Наблюдение за less файлами в папке less
    gulp.watch('app/*.html', browserSync.reload); // Наблюдение за HTML файлами в корне проекта
    gulp.watch('app/js/**/*.js', browserSync.reload);   // Наблюдение за JS файлами в папке js
});

/*gulp.task('clean', function() {
    return del.sync('dist'); // Удаляем папку dist перед сборкой
});*/

gulp.task('img', function() {
    return gulp.src('app/img/**/*') // Берем все изображения из app
        .pipe(cache(imagemin({  // Сжимаем их с наилучшими настройками с учетом кеширования
            interlaced: true,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img')); // Выгружаем на продакшен
});

gulp.task('build', [/*'clean',*/ 'img', 'less', 'scripts'], function() {

    var buildCss = gulp.src([ // Переносим библиотеки в продакшен
        'app/css/main.css',
        'app/css/libs.min.css'
    ])
        .pipe(gulp.dest('dist/css'))

    var buildFonts = gulp.src('app/fonts/**/*') // Переносим шрифты в продакшен
        .pipe(gulp.dest('dist/fonts'))

    var buildJs = gulp.src('app/js/**/*') // Переносим скрипты в продакшен
        .pipe(gulp.dest('dist/js'))

    var buildHtml = gulp.src('app/*.html') // Переносим HTML в продакшен
        .pipe(gulp.dest('dist'));

});

gulp.task('clear', function (callback) {
    return cache.clearAll();
})

gulp.task('default', ['watch']);

package.json

{
  "name": "projectgulp",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "browser-sync": "^2.18.12",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-exit": "^0.0.2",
    "gulp-grep": "^0.2.0",
    "gulp-html-replace": "^1.6.2",
    "gulp-imagemin": "^3.3.0",
    "gulp-jsonminify": "^1.0.0",
    "gulp-less": "^3.3.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-order": "^1.1.1",
    "gulp-protractor": "^4.1.0",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglifyjs": "^0.6.2",
    "gulp-uglify": "^3.0.0",
    "gulp-using": "^0.1.1",
    "karma": "^1.7.0",
    "merge-stream": "^1.0.1"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0",
    "gulp-csso": "^3.0.0",
    "gulp-jshint": "^2.0.4",
    "gulp-plumber": "^1.1.0",
    "gulp-rigger": "^0.5.8",
    "gulp-spritesmith": "0.0.2",
    "gulp-watch": "^4.3.11"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/.."
  },
  "author": "...",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/.."
  },
  "homepage": "https://github.com/...",
  "description": ""
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    //= include/header.html

    <section class="content">
        Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которой над взобравшись дорогу рыбными свой деревни, парадигматическая она сбить даль щеке! Прямо мир агенство о предложения буквенных реторический это.

        <p><img src="img/1.jpg" alt="Alt"></p>
        <p><img src="img/2.jpg" alt="Alt"></p>
        <p><img src="img/3.jpg" alt="Alt"></p>
    </section>

    //= include/footer.html

    <script src="js/libs.min.js"></script>

</body>
</html>

[tory_kuzya]

sim3x:

C:\OpenServer\domains\localhost\projectgulp>gulp
[16:54:39] Using gulpfile C:\OpenServer\domains\localhost\projectgulp\gulpfile.js
[16:54:39] Starting 'browser-sync'...
[16:54:39] Finished 'browser-sync' after 172 ms
[16:54:39] Starting 'less'...
[16:54:39] Starting 'scripts'...
[BS] 1 file changed (style.css)
[16:54:40] Finished 'less' after 1.05 s
[16:54:40] Starting 'css-libs'...
[16:54:40] Finished 'css-libs' after 1.89 ms
[16:54:40] Finished 'scripts' after 1.05 s
[16:54:40] Starting 'watch'...
[16:54:40] Finished 'watch' after 11 ms
[16:54:40] Starting 'default'...
[16:54:40] Finished 'default' after 1.39 μs
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.103:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.103:3001
 --------------------------------------
[BS] Serving files from: app

[sim3x]

tory_kuzya: В вопрос

Спасибо

Answer 1

[wbrapist]

"Gulp для самых маленьких"?

Тот таск, что ты выполняешь, нужен для разработки. Для того, чтобы вкинуть исходные файлы в dist тебе нужен другой таск, который у тебя определен в gulpfile.
В консоли введи:
gulp build

P.s. Изображения не переносятся, как раз-таки потому, что не все таски отработали. Ты только определила таск img (что и как должно происходить), но не выполнила.
При вызове build как раз и выполняется нужный тебе img-таск.

Comments

[tory_kuzya]

Спасибо, помогло! Только я не поняла, какую команду мне использовать в период написания, добавления, изменения файлов, чтоб gulp это своевременно копировал в готовый проект? gulp build? А то, что у меня написано - для чего используется? Простите чайника

[wbrapist]

Во время непосредственно разработки(вёрстка и так далее) вы запускаете таск watch (в консоли gulp watch или же просто gulp - так определено у вас в коде), пока работает этот таск (консоль не реагирует на ваши действия - это ОК) вы что-то пишите в своих html/css/js/и других файлах. После того, как всё готово, вы выполняете в консоли gulp build, чтобы выполнить определенные таски (та же обработка изображений) и перекинуть уже готовые исходные файлы в папку dist.
По факту, все разъяснения уже есть в вашем gulpfile.

Кстати, вы вообще понимаете, что происходит когда вы запускаете таск gulp? (Увидел выше, что всё-таки нет. В коде комментарии есть, кстати)
Я сам недавно только познакомился с Gulp. Несколько раз соберёте проект - будет больше понимания. Если вообще не понимаете, что происходит, перечитайте статью несколько раз, там всё подробно расписано.

[tory_kuzya]

wbrapist: Спасибо за разъяснения.

Answer 2

[Sergiu Mitu]

У вас запускается сервер + watch, это нормальное поведение, так и должно быть. Запустили watch и забыли, все таски должен выполнять он а не вы вручную, на то он и задуман.

Answer 3

[Максим Щирба]

Нужно остановить выполнение gulp в терминале/консоле , ctrl + c , правь код и потом снова запускай