質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    20439questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    2364questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • npm

    368questions

    npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

  • gulp

    335questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

gulpを4にバージョンアップしたがエラーが解消できません。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 512

cotton88

score 79

 gulpを4にバージョンアップして、以下のエラーが解消できません。

AssertionError [ERR_ASSERTION]: Task function must be specified

3 -> 4のアップデートに伴ってgulpfile.jsの引数を変更してみましたがエラーが出続け解決できません。
主に、最後の上の gulp.series watchなどの付近を色々と修正してみたんですが何も解消されず。。。

何が間違っているかご指摘ください。
よろしくお願いいたします。

 条件は以下のとおりです。

node : 10.12.0
npm : 6.4.1gulp
gulp(local) : 4

const gulp = require('gulp');

// const autoprefixer = require('gulp-autoprefixer');
const autoprefixer = require("autoprefixer");
const babelify = require('babelify');
const browser = require('browser-sync').create();
const browserify = require('browserify');
const buffer = require('vinyl-buffer');
const cleanCSS = require('gulp-clean-css');
// const imagemin = require('gulp-imagemin');
const concat = require("gulp-concat");
// const mozjpeg  = require('imagemin-mozjpeg');
const plumber = require('gulp-plumber');
// const pngquant = require('imagemin-pngquant');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const through = require('through2');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const assets = require('postcss-assets');
// const normalize = require('postcss-normalize');
const postcssGapProperties = require("postcss-gap-properties");
const pug = require('gulp-pug');



const paths = {
  'scss':  './src/stylesheets/',
  'jssrc': './src/javascripts/',
  'pug':   './src/pug/',
  'html':  './dest/',
  'css':   './dest/assets/css/',
  'js':    './dest/assets/js/',
  'image': 'assets/images/'
}

gulp.task('server', function () {
    browser.init({
        server: {
            baseDir: paths.html,
            index: 'index.html'
        },
        port: 2000
    });
});
//setting : Pug Options
const pugOptions = {
  pretty: true
}
//Pug
gulp.task('pug', function () {
  return gulp.src([ paths.pug + '**/*.pug', '!' + paths.pug + '**/_*.pug'])
    .pipe(plumber())
    .pipe(pug(pugOptions))
    .pipe(gulp.dest(paths.html))
    .pipe(browser.stream());
    browser.reload();
});


gulp.task('sass', function () {
    gulp.src( paths.scss + '**/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(postcss([
            postcssGapProperties(),
            autoprefixer({
                grid: true,
                browsers: ['last 1 version'],
                cascade: false
               }),
            assets({
                loadPaths: [ paths.image ], // basePathから見た画像フォルダの位置
                basePath: paths.html, // プロジェクトで公開するパス
                cachebuster: true
            })
        ]))
        // .pipe(cleanCSS())
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest( paths.css ))
        .pipe(browser.stream());
});

gulp.task('es2015', function () {
    var browserified = through.obj(function(file,encode,callback){
        browserify(file.path)
            .transform(babelify, {presets: ['es2015']})
            .bundle(function(err,res){
                if(err){
                    return callback(err);
                }
                file.contents = res;
                callback(null,file);
            })
            .on("error", function (err) {
                console.log("Error : " + err.message);
            });
    });

    gulp.src(paths.jssrc + 'index.js')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(browserified)
        .pipe(buffer())
        .pipe(uglify())
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest(paths.js))
        .pipe(browser.stream());
});


gulp.task('js.concat', function() {
  return gulp.src(paths.jssrc + 'vendor/*.js')
    .pipe(plumber())
    .pipe(concat('vendor.pack.js'))
    .pipe(uglify())
    .pipe(gulp.dest(paths.js));
});


gulp.task('js', ['js.concat']);


gulp.task('watch', function() {
    gulp.watch(paths.pug + '**/*.pug', ['pug']);
    gulp.watch(paths.scss + '**/*.scss',['sass']);
    gulp.watch([paths.jssrc + '**/*.js', '!' + paths.jssrc + 'vendor/*'], ['es2015']);
})
gulp.task('default', gulp.series('pug', 'sass', 'es2015', 'watch'));

参考にしたページ

https://satoyan419.com/gulp-v4/
https://www.liquidlight.co.uk/blog/article/how-do-i-update-to-gulp-4/

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

このように自己解決できました。

var gulp =  require('gulp'),
            autoprefixer = require("autoprefixer"),
            babelify = require('babelify'),
            browser = require('browser-sync').create(),
            browserify = require('browserify'),
            buffer = require('vinyl-buffer'),
            cleanCSS = require('gulp-clean-css'),
            concat = require("gulp-concat"),
            plumber = require('gulp-plumber'),
            sass = require('gulp-sass'),
            sourcemaps = require('gulp-sourcemaps'),
            through = require('through2'),
            uglify = require('gulp-uglify'),
            postcss = require('gulp-postcss'),
            assets = require('postcss-assets'),
            postcssGapProperties = require("postcss-gap-properties"),
            ejs = require('gulp-ejs');

const paths = {
  'scss':  './src/stylesheets/',
  'jssrc': './src/javascripts/',
  'ejs':   './src/ejs/',
  'html':  './dest/',
  'css':   './dest/assets/css/',
  'js':    './dest/assets/js/',
  'imagesrc': '/src/images/',
  'image': '/dest/assets/images/'
}

// EJS
gulp.task( "ejs", function () {
    return gulp.src([ paths.ejs + '**/*.ejs', '!' + paths.ejs + '**/_*.ejs'])
    .pipe(ejs({}, {}, { ext: '.html' }))
    .pipe( gulp.dest(paths.html) );
});

// SCSS
gulp.task('sass', () => {
    return gulp.src( paths.scss + '**/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass({
            importer: packageImporter({
                extensions: ['.scss', '.css']
            })
        }))
        .pipe(postcss([
            postcssGapProperties(),
            autoprefixer({
                grid: true,
                browsers: ['last 1 version'],
                cascade: false
               }),
            assets({
                loadPaths: [ paths.image ], // basePathから見た画像フォルダの位置
                basePath: paths.html, // プロジェクトで公開するパス
                cachebuster: true
            })
        ]))
        .pipe(cleanCSS())
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest( paths.css ))
        .pipe(browser.stream());
});

// JS
gulp.task('es2015', () => {
    var browserified = through.obj(function(file,encode,callback){
        browserify(file.path)
            .transform(babelify, {presets: ['es2015']})
            .bundle(function(err,res){
                if(err){
                    return callback(err);
                }
                file.contents = res;
                callback(null,file);
            })
            .on("error", function (err) {
                console.log("Error : " + err.message);
            });
    });
    return gulp.src(paths.jssrc + 'index.js')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(browserified)
        .pipe(buffer())
        .pipe(uglify())
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest(paths.js))
        .pipe(browser.stream());
});

// JS Vendor CONCAT
gulp.task('js-concat', () => {
  return gulp.src(paths.jssrc + 'vendor/*.js')
    .pipe(plumber())
    .pipe(concat('vendor.pack.js'))
    .pipe(uglify())
    .pipe(gulp.dest(paths.js));
});


// watch
gulp.task('watches', () => {
    gulp.watch(paths.ejs + '**/*.ejs', gulp.task('ejs'));
    gulp.watch(paths.scss + '**/*.scss', gulp.task('sass'));
    gulp.watch(paths.jssrc + 'vendor/*.js', gulp.task('js-concat'));
    gulp.watch([paths.jssrc + '**/*.js', '!' + paths.jssrc + 'vendor/*'], gulp.task('es2015'));
});

// browser-sync
gulp.task('server', (done) => {
    browser.init({
        server: {
            baseDir: paths.html,
            index: 'index.html'
        },
        port: 8888
    });
    done();
});

// default v4 での記述
gulp.task('default', gulp.parallel(['watches', 'server']));

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-2

バージョン4では以下のような記述は
gulp.task('pug', function () {
gulp.task('sass', function () {

このように変わるそうです。
function pug() {
function sass () {

詳しくは参考URLをご覧ください。
https://qiita.com/hibikikudo/items/493fbfbbea183c94b38b

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    20439questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    2364questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • npm

    368questions

    npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

  • gulp

    335questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。