K
K
krll-k2014-09-30 10:31:19
HTML
krll-k, 2014-09-30 10:31:19

What should gulpfile.js look like if all you need is an embedded web server and a livereload server?

On Habré, I came across an article GulpJS - a fantastically fast project builder , but there is a lot of stuff that I don't need. I just try to comment out the lines I don't need - as a result, the launch occurs with an error:

C:\projects\cherry_studio>node_modules\.bin\gulp http-server

module.js:340
    throw err;
    ^
Error: Cannot find module 'imagemin-jpegtran'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (C:\projects\cherry_studio\node_modules\gulp-imagemin\
node_modules\imagemin\index.js:197:27)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

There is no time to understand the dependencies, you only need a web server and a livereload server. So that I can go to the console, type in node_modules\.bin\gulp, and as a result I get a web server on port 9000, and when I go into the browser I turn on the livereload plugin, it would update the page for me after saving to files.
What is the problem? The deadline is coming soon, and I say again, there is no time to figure it out. Need help as soon as possible.
I throw my gulpfile.js:
var lr = require('tiny-lr'), // Минивебсервер для livereload
    gulp = require('gulp'), // Сообственно Gulp JS
    jade = require('gulp-jade'), // Плагин для Jade
    stylus = require('gulp-stylus'), // Плагин для Stylus
    livereload = require('gulp-livereload'), // Livereload для Gulp
    myth = require('gulp-myth'), // Плагин для Myth - http://www.myth.io/
    csso = require('gulp-csso'), // Минификация CSS
    imagemin = require('gulp-imagemin'), // Минификация изображений
    uglify = require('gulp-uglify'), // Минификация JS
    concat = require('gulp-concat'), // Склейка файлов
    connect = require('connect'), // Webserver
    server = lr();

    // Собираем Stylus
    // gulp.task('stylus', function() {
    //     gulp.src('./assets/stylus/screen.styl')
    //         .pipe(stylus({
    //             use: ['nib']
    //         })) // собираем stylus
    //     .on('error', console.log) // Если есть ошибки, выводим и продолжаем
    //     .pipe(myth()) // добавляем префиксы - http://www.myth.io/
    //     .pipe(gulp.dest('./public/css/')) // записываем css
    //     .pipe(livereload(server)); // даем команду на перезагрузку css
    // });

    // Локальный сервер для разработки
    gulp.task('http-server', function() {
        connect()
            // .use(require('connect-livereload')())
            .use(connect.static('./assets'))
            .use(connect.static('./index.html'))
            .listen('9000');

        console.log('Server listening on http://localhost:9000');
    });

    // Запуск сервера разработки gulp watch
    gulp.task('watch', function() {
        // Предварительная сборка проекта
        // gulp.run('stylus');
        // gulp.run('jade');
        // gulp.run('images');
        // gulp.run('js');

        // Подключаем Livereload
        server.listen(35729, function(err) {
            if (err) return console.log(err);

            //gulp.watch('assets/stylus/**/*.styl', function() {
                //gulp.run('stylus');
            //});
            //gulp.watch('assets/template/**/*.jade', function() {
                //gulp.run('jade');
           // });
            gulp.watch('index.html', function() {
                //gulp.run('images');
                console.log('gulp.watch index.html');
            });
            gulp.watch('assets/css/**/*', function() {
                //gulp.run('images');
                console.log('gulp.watch css');
            });
            gulp.watch('assets/img/**/*', function() {
                //gulp.run('images');
                console.log('gulp.watch img');
            });
            gulp.watch('assets/js/**/*', function() {
                //gulp.run('js');
                console.log('gulp.watch js');
            });
        });
        gulp.run('http-server');
    });

The first working variant with web server and livereload server will be the solution, so please don't ask stupid questions in the answers
. Thank you for your understanding! Waiting for answers, gone to smoke

Answer the question

In order to leave comments, you need to log in

3 answer(s)
K
krll-k, 2014-09-30
@krll-k

I found what I was looking for -> https://github.com/krll-assets/gulp-boilerplate

S
Singularity, 2014-10-28
@Singularity

var gulp = require('gulp'),
  connect = require('gulp-connect');

gulp.task('connect', function() {
  connect.server({
    root: 'app',
    livereload: true
  });
});

gulp.task('html', function () {
  gulp.src('./app/*.html')
    .pipe(connect.reload());
});

gulp.task('watch', function () {
  gulp.watch(['./app/*.html'], ['html']);
});

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

A
andreyqin, 2014-09-30
@andreyqin

While you were asking this question and smoking, you could easily find everything you need
https://www.npmjs.org/package/livereload
In addition to the video (8 min), there is a livereload and server installation in progress: www.youtube.com /watch?v=bK3kzGhbJR0

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question