K
K
KononovD2019-01-03 17:39:16
gulp.js
KononovD, 2019-01-03 17:39:16

Why did my gulpfile stop working?

Hello everyone!
Somewhere in the middle of summer (2018) I compiled my gallp file:

'use strict';

var gulp = require('gulp'),
    mainBowerFiles = require('main-bower-files'),
    watch = require('gulp-watch'),
    prefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    rimraf = require('rimraf'),
    browserSync = require("browser-sync"),
    reload = browserSync.reload;

var path = {
    vendor: {
        js: 'app/js/',
        css: 'app/css/'
    },
    dist: { 
        html: 'dist/',
        js: 'dist/js/',
        scss: 'dist/css/',
        css: 'dist/css/',
        img: 'dist/img/',
        fonts: 'dist/fonts/'
    },
    app: { 
        html: 'app/*.html',
        js: 'app/js/*.js', 
        scss: 'app/css/*.scss',
        css: 'app/css/*.css',
        img: 'app/img/**/*.*', 
        fonts: 'app/fonts/**/*.*'
    },
    watch: {
        html: 'app/**/*.html',
        js: 'app/js/**/*.js',
        scss: 'app/css/**/*.scss',
        css: 'app/css/**/*.css',
        img: 'app/img/**/*.*',
        fonts: 'app/fonts/**/*.*'
    },
    clean: './dist'
};

var config = {
    server: {
        baseDir: "./dist"
    },
};

gulp.task('vendorJs:build', function() {
    gulp.src(mainBowerFiles('**/*.js')) 
        .pipe(gulp.dest(path.vendor.js))
});

gulp.task('vendorCss:build', function() {
    gulp.src(mainBowerFiles('**/*.css')) 
        .pipe(gulp.dest(path.vendor.css)) 
});

gulp.task('html:build', function() {
    gulp.src(path.app.html)
        .pipe(gulp.dest(path.dist.html)) 
        .pipe(reload({ stream: true })); 
});

gulp.task('js:build', function() {
    gulp.src(path.app.js)
        .pipe(sourcemaps.init())
        .pipe(uglify()) 
        .pipe(sourcemaps.write()) 
        .pipe(gulp.dest(path.dist.js))
        .pipe(reload({ stream: true })); 
});

gulp.task('scss:build', function() {
    gulp.src(path.app.scss) 
        .pipe(sourcemaps.init()) 
        .pipe(sass())
        .pipe(prefixer()) 
        .pipe(cleanCSS()) 
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.dist.scss))
        .pipe(reload({ stream: true }));
});

gulp.task('css:build', function() {
    gulp.src(path.app.css) 
        .pipe(sourcemaps.init())
        .pipe(gulp.dest(path.dist.css)) 
        .pipe(reload({ stream: true }));
});

gulp.task('image:build', function() {
    gulp.src(path.app.img) 
        .pipe(imagemin({ 
            progressive: true,
            svgoPlugins: [{ removeViewBox: false }],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.dist.img)) 
        .pipe(reload({ stream: true }));
});

gulp.task('fonts:build', function() {
    gulp.src(path.app.fonts)
        .pipe(gulp.dest(path.dist.fonts))
});

gulp.task('build', [
    'vendorCss:build',
    'vendorJs:build',
    'html:build',
    'js:build',
    'scss:build',
    'css:build',
    'fonts:build',
    'image:build'
]);

gulp.task('watch', function() {
    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.scss], function(event, cb) {
        gulp.start('scss:build');
    });
    watch([path.watch.css], function(event, cb) {
        gulp.start('css:build');
    });
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.img], function(event, cb) {
        gulp.start('image:build');
    });
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
});

gulp.task('webserver', function() {
    browserSync(config);
});

gulp.task('clean', function(cb) {
    rimraf(path.clean, cb);
});

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

but he took something and stopped working... says
"task function must be specified"
before everything worked..
This is how my package.json looks like
{
  "name": "testgulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "browser-sync": "^2.2.3",
    "gulp": "latest",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-clean-css": "latest",
    "gulp-imagemin": "^2.2.1",
    "gulp-sass": "latest",
    "gulp-sourcemaps": "^1.5.0",
    "gulp-uglify": "^1.1.0",
    "gulp-watch": "^4.1.1",
    "imagemin-pngquant": "^4.0.0",
    "main-bower-files": "^2.13.1",
    "rimraf": "^2.3.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

there are only 2 overrides in bower.json - the rest is standard:
"overrides":
    {
        "bootstrap":
        {
            "main": [
                "./dist/js/bootstrap.min.js",
                "./dist/css/bootstrap.min.css"
            ]
        },
        "jquery":
        {
            "main": "dist/jquery.min.js"
        }
    }

npm version - 6.4.1
bower version - 1.8.4
gulp version:
CLI version 2.0.1
Local version 4.0.0
Please help)

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Maxim Timofeev, 2019-01-03
@webinar

Somewhere in the middle of summer (2018) compiled my galp file

Most likely this is exactly the point. Couldn't wait for autumn?
we hardly know each other, and you already show your package.json
this is all because it is new: https://www.liquidlight.co.uk/blog/article/how-do-...
namely:
it was in the old version:
gulp.task('default', ['del'], function() {
    // default task code here
});

became:
gulp.task('default', gulp.series('del', function() { 
    // default task code here
}));

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question