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

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

新規登録して質問してみよう
ただいま回答率
85.50%
npm

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

Node.js

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

JavaScript

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

gulp

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

Q&A

解決済

2回答

535閲覧

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

cotton88

総合スコア87

npm

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

Node.js

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

JavaScript

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

gulp

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

0グッド

0クリップ

投稿2018/11/17 15:21

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

AssertionError [ERR_ASSERTION]: Task function must be specified

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

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

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

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

javascript

1const gulp = require('gulp'); 2 3// const autoprefixer = require('gulp-autoprefixer'); 4const autoprefixer = require("autoprefixer"); 5const babelify = require('babelify'); 6const browser = require('browser-sync').create(); 7const browserify = require('browserify'); 8const buffer = require('vinyl-buffer'); 9const cleanCSS = require('gulp-clean-css'); 10// const imagemin = require('gulp-imagemin'); 11const concat = require("gulp-concat"); 12// const mozjpeg = require('imagemin-mozjpeg'); 13const plumber = require('gulp-plumber'); 14// const pngquant = require('imagemin-pngquant'); 15const sass = require('gulp-sass'); 16const sourcemaps = require('gulp-sourcemaps'); 17const through = require('through2'); 18const uglify = require('gulp-uglify'); 19const postcss = require('gulp-postcss'); 20const assets = require('postcss-assets'); 21// const normalize = require('postcss-normalize'); 22const postcssGapProperties = require("postcss-gap-properties"); 23const pug = require('gulp-pug'); 24 25 26 27const paths = { 28 'scss': './src/stylesheets/', 29 'jssrc': './src/javascripts/', 30 'pug': './src/pug/', 31 'html': './dest/', 32 'css': './dest/assets/css/', 33 'js': './dest/assets/js/', 34 'image': 'assets/images/' 35} 36 37gulp.task('server', function () { 38 browser.init({ 39 server: { 40 baseDir: paths.html, 41 index: 'index.html' 42 }, 43 port: 2000 44 }); 45}); 46//setting : Pug Options 47const pugOptions = { 48 pretty: true 49} 50//Pug 51gulp.task('pug', function () { 52 return gulp.src([ paths.pug + '**/*.pug', '!' + paths.pug + '**/_*.pug']) 53 .pipe(plumber()) 54 .pipe(pug(pugOptions)) 55 .pipe(gulp.dest(paths.html)) 56 .pipe(browser.stream()); 57 browser.reload(); 58}); 59 60 61gulp.task('sass', function () { 62 gulp.src( paths.scss + '**/*.scss') 63 .pipe(plumber()) 64 .pipe(sourcemaps.init()) 65 .pipe(sass()) 66 .pipe(postcss([ 67 postcssGapProperties(), 68 autoprefixer({ 69 grid: true, 70 browsers: ['last 1 version'], 71 cascade: false 72 }), 73 assets({ 74 loadPaths: [ paths.image ], // basePathから見た画像フォルダの位置 75 basePath: paths.html, // プロジェクトで公開するパス 76 cachebuster: true 77 }) 78 ])) 79 // .pipe(cleanCSS()) 80 .pipe(sourcemaps.write('../maps')) 81 .pipe(gulp.dest( paths.css )) 82 .pipe(browser.stream()); 83}); 84 85gulp.task('es2015', function () { 86 var browserified = through.obj(function(file,encode,callback){ 87 browserify(file.path) 88 .transform(babelify, {presets: ['es2015']}) 89 .bundle(function(err,res){ 90 if(err){ 91 return callback(err); 92 } 93 file.contents = res; 94 callback(null,file); 95 }) 96 .on("error", function (err) { 97 console.log("Error : " + err.message); 98 }); 99 }); 100 101 gulp.src(paths.jssrc + 'index.js') 102 .pipe(plumber()) 103 .pipe(sourcemaps.init()) 104 .pipe(browserified) 105 .pipe(buffer()) 106 .pipe(uglify()) 107 .pipe(sourcemaps.write('../maps')) 108 .pipe(gulp.dest(paths.js)) 109 .pipe(browser.stream()); 110}); 111 112 113gulp.task('js.concat', function() { 114 return gulp.src(paths.jssrc + 'vendor/*.js') 115 .pipe(plumber()) 116 .pipe(concat('vendor.pack.js')) 117 .pipe(uglify()) 118 .pipe(gulp.dest(paths.js)); 119}); 120 121 122gulp.task('js', ['js.concat']); 123 124 125gulp.task('watch', function() { 126 gulp.watch(paths.pug + '**/*.pug', ['pug']); 127 gulp.watch(paths.scss + '**/*.scss',['sass']); 128 gulp.watch([paths.jssrc + '**/*.js', '!' + paths.jssrc + 'vendor/*'], ['es2015']); 129}) 130gulp.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/

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

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

javascript

1var gulp = require('gulp'), 2 autoprefixer = require("autoprefixer"), 3 babelify = require('babelify'), 4 browser = require('browser-sync').create(), 5 browserify = require('browserify'), 6 buffer = require('vinyl-buffer'), 7 cleanCSS = require('gulp-clean-css'), 8 concat = require("gulp-concat"), 9 plumber = require('gulp-plumber'), 10 sass = require('gulp-sass'), 11 sourcemaps = require('gulp-sourcemaps'), 12 through = require('through2'), 13 uglify = require('gulp-uglify'), 14 postcss = require('gulp-postcss'), 15 assets = require('postcss-assets'), 16 postcssGapProperties = require("postcss-gap-properties"), 17 ejs = require('gulp-ejs'); 18 19const paths = { 20 'scss': './src/stylesheets/', 21 'jssrc': './src/javascripts/', 22 'ejs': './src/ejs/', 23 'html': './dest/', 24 'css': './dest/assets/css/', 25 'js': './dest/assets/js/', 26 'imagesrc': '/src/images/', 27 'image': '/dest/assets/images/' 28} 29 30// EJS 31gulp.task( "ejs", function () { 32 return gulp.src([ paths.ejs + '**/*.ejs', '!' + paths.ejs + '**/_*.ejs']) 33 .pipe(ejs({}, {}, { ext: '.html' })) 34 .pipe( gulp.dest(paths.html) ); 35}); 36 37// SCSS 38gulp.task('sass', () => { 39 return gulp.src( paths.scss + '**/*.scss') 40 .pipe(plumber()) 41 .pipe(sourcemaps.init()) 42 .pipe(sass({ 43 importer: packageImporter({ 44 extensions: ['.scss', '.css'] 45 }) 46 })) 47 .pipe(postcss([ 48 postcssGapProperties(), 49 autoprefixer({ 50 grid: true, 51 browsers: ['last 1 version'], 52 cascade: false 53 }), 54 assets({ 55 loadPaths: [ paths.image ], // basePathから見た画像フォルダの位置 56 basePath: paths.html, // プロジェクトで公開するパス 57 cachebuster: true 58 }) 59 ])) 60 .pipe(cleanCSS()) 61 .pipe(sourcemaps.write('../maps')) 62 .pipe(gulp.dest( paths.css )) 63 .pipe(browser.stream()); 64}); 65 66// JS 67gulp.task('es2015', () => { 68 var browserified = through.obj(function(file,encode,callback){ 69 browserify(file.path) 70 .transform(babelify, {presets: ['es2015']}) 71 .bundle(function(err,res){ 72 if(err){ 73 return callback(err); 74 } 75 file.contents = res; 76 callback(null,file); 77 }) 78 .on("error", function (err) { 79 console.log("Error : " + err.message); 80 }); 81 }); 82 return gulp.src(paths.jssrc + 'index.js') 83 .pipe(plumber()) 84 .pipe(sourcemaps.init()) 85 .pipe(browserified) 86 .pipe(buffer()) 87 .pipe(uglify()) 88 .pipe(sourcemaps.write('../maps')) 89 .pipe(gulp.dest(paths.js)) 90 .pipe(browser.stream()); 91}); 92 93// JS Vendor CONCAT 94gulp.task('js-concat', () => { 95 return gulp.src(paths.jssrc + 'vendor/*.js') 96 .pipe(plumber()) 97 .pipe(concat('vendor.pack.js')) 98 .pipe(uglify()) 99 .pipe(gulp.dest(paths.js)); 100}); 101 102 103// watch 104gulp.task('watches', () => { 105 gulp.watch(paths.ejs + '**/*.ejs', gulp.task('ejs')); 106 gulp.watch(paths.scss + '**/*.scss', gulp.task('sass')); 107 gulp.watch(paths.jssrc + 'vendor/*.js', gulp.task('js-concat')); 108 gulp.watch([paths.jssrc + '**/*.js', '!' + paths.jssrc + 'vendor/*'], gulp.task('es2015')); 109}); 110 111// browser-sync 112gulp.task('server', (done) => { 113 browser.init({ 114 server: { 115 baseDir: paths.html, 116 index: 'index.html' 117 }, 118 port: 8888 119 }); 120 done(); 121}); 122 123// default v4 での記述 124gulp.task('default', gulp.parallel(['watches', 'server']));

投稿2019/05/17 02:33

cotton88

総合スコア87

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

投稿2019/05/06 01:12

wa_

総合スコア55

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問