Creating a gulp workflow

1

Hello,

I am putting together my own gulp workflow for work.
I am getting an error: “TypeError: dest.on is not a function”(from the function concatCSS)

Could anyone help me out since I’m new to Gulp ?
Thanks in advance!

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload,
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    sourceMaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    imageMin = require('gulp-imagemin'),
    changed = require('gulp-changed'),
    uglify = require('gulp-uglify'),
    lineEC = require('gulp-line-ending-corrector')

var root = './',
    scss = root + 'src/sass/',
    js = root + 'src/js/',
    cssdist = root + 'dist/css'
    jsdist = root + 'dist/js/';

var phpWatchFiles = root + '**/*.php',
    styleWatchFiles = scss + '**/*.scss';

var jsSRC = [
  js + 'index.js'
]

var imgSRC = root + 'src/images/*',
    imgDIST = root + 'dist/images';

var cssSRC = [
  root + 'src/css/style.css'
]

function css(){
  return gulp.src([scss + 'style.scss'])
    .pipe(sourceMaps.init({loadMaps: true}))
    .pipe(sass({
      outputStyle: 'expanded'
    }).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(sourceMaps.write())
    .pipe(lineEC())
    .pipe(gulp.dest(cssdist))
}

function concatCSS(){
  return gulp.src(cssSRC)
      .pipe(sourceMaps.init({loadMaps: true, largeFile: true}))
      .pipe(concat('style.min.css'))
      .pipe(cleanCSS())
      .pipe(sourceMaps.write('./maps/'))
      .pipe(lineEC)
      .pipe(gulp.dest(scss))
}

function javascript(){
  return gulp.src(jsSRC)
    .pipe(concat('index.js'))
    .pipe(uglify())
    .pipe(lineEC())
    .pipe(gulp.dest(jsdist))
}

function img(){
  return gulp.src(imgSRC)
  .pipe(changed(imgDIST))
  .pipe(imageMin([
    imageMin.gifsicle({interlaced: true}),
    imageMin.jpegtran({interlaced: true}),
    imageMin.optipng({optimizationLevel: 5})
  ]))
  .pipe(gulp.dest(imgDIST));
}

function watch(){
  browserSync.init({
    open: 'external',
    proxy: 'http://localhost/gulpy',
    port: 8080
  });
  gulp.watch(styleWatchFiles, gulp.series([css, concatCSS]));
  gulp.watch(jsSRC, gulp.series('js'));
  gulp.watch(imgSRC, img);
  gulp.watch([phpWatchFiles, jsdist + 'index.js', scss + 'style.min.css'])
      .on('change', browserSync.reload)
}

exports.css = css;
exports.concatCSS = concatCSS;
exports.js = javascript;
exports.watch = watch;
exports.imageMin = imageMin;

var build = gulp.parallel(watch);
gulp.task('default', build);

and

{
  "name": "gulpy",
  "version": "1.0.0",
  "description": "Guld demonstation",
  "main": "index.php",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Allan ROLLE",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-changed": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-line-ending-corrector": "^1.0.3",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2"
  }
}

In the end, I need to watch multiple php files using XAMP , sass files for css, and js files.

2

Never mind, I found it