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

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

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

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

gulp

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

Q&A

0回答

2396閲覧

gulpのバージョンアップをしたらエラーが出て実行出来ない。

stoneriver_2920

総合スコア13

npm

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

gulp

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

0グッド

0クリップ

投稿2018/06/23 10:40

編集2022/01/12 10:55

gulpを以前まで、3.9を使っていたが、4が出たと知りバージョンアップを試みた。
エラーが出たのでnpmの相性かと思い、npm、node.js、pakage.jsonのバージョンアップをした。
しかしまだエラーが出るので解決策を知りたい。
以下、gulp watch した際のコンソール画面。
イメージ説明

少し長くなりますが、package.jsonとgulpfine.jsの追記です。

package.json

1{ 2 "name": "gulp", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "author": "", 10 "license": "ISC", 11 "devDependencies": { 12 "browser-sync": "^2.18.8", 13 "gulp": "^4.0.0", 14 "gulp-changed": "^3.2.0", 15 "gulp-plumber": "^1.1.0", 16 "gulp-sass": "^4.0.1" 17 } 18}

gulpfile.js

1var gulp = require('gulp'), 2 autoprefixer = require('gulp-autoprefixer'), 3 browserSync = require('browser-sync'), 4 cssimport = require('postcss-import'), 5 cssmin = require('gulp-cssmin'), 6 cssv = require('gulp-csslint'), 7 cssvariables = require('postcss-css-variables'), 8 colorfunction = require('postcss-color-function'), 9 coffee = require('gulp-coffee'), 10 concat = require('gulp-concat'), 11 htmlv = require('gulp-htmlhint'), 12 imagemin = require('gulp-imagemin'), 13 mqpacker = require('css-mqpacker'), 14 nested = require('postcss-nested'), 15 notify = require('gulp-notify'), 16 plumber = require('gulp-plumber'), 17 postcss = require('gulp-postcss'), 18 pump = require('pump'), 19 rename = require('gulp-rename'), 20 simplevars = require('postcss-simple-vars'), 21 slim = require('gulp-slim'), 22 ssi = require('browsersync-ssi'), 23 tinyping = require('gulp-tinypng-compress'), 24 uglify = require('gulp-uglify'); 25 26// default 27gulp.task('default', ['watch', 'browser-sync']); 28 29// concat 30gulp.task('css.concat', () => { 31 var plugins = [ 32 colorfunction, 33 cssimport, 34 cssvariables, 35 mqpacker, 36 nested, 37 simplevars 38 ]; 39 gulp.src('docs/tmp/css/*.css') 40 .pipe(plumber({ 41 errorHandler: notify.onError('Error: <%= error.message %>') 42 })) 43 .pipe(postcss(plugins)) 44 .pipe(autoprefixer({ 45 browsers: ['last 2 version'], 46 grid: true 47 })) 48 .pipe(concat('s.css')) 49 .pipe(gulp.dest('docs/tmp/concat')) 50}); 51 52// cssmin 53gulp.task('cssmin', ['css.concat'], () => { 54 gulp.src('docs/tmp/concat/s.css') 55 .pipe(plumber({ 56 errorHandler: notify.onError('Error: <%= error.message %>') 57 })) 58 .pipe(cssmin()) 59 .pipe(rename({suffix: '.min'})) 60 .pipe(gulp.dest('htdocs/css')) 61 .pipe(browserSync.stream()) 62}); 63 64// css 65gulp.task('css', ['css.concat', 'cssmin']); 66 67// coffee 68gulp.task('coffee', () => { 69 gulp.src('docs/tmp/js/*.coffee') 70 .pipe(plumber({ 71 errorHandler: notify.onError('Error: <%= error.message %>') 72 })) 73 .pipe(coffee({bare: true})) 74 .pipe(gulp.dest('htdocs/js')) 75 .pipe(browserSync.stream()) 76}); 77 78// uglify 79gulp.task('jsmin', (cb) => { 80 pump( 81 [ 82 gulp.src('htdocs/js/*js'), 83 uglify(), 84 rename({suffix: '.min'}), 85 gulp.dest('htdocs/js/min') 86 ], 87 cb 88 ); 89}); 90 91// slim 92gulp.task('slim', () => { 93 gulp.src('docs/tmp/slim/*.slim') 94 .pipe(plumber({ 95 errorHandler: notify.onError('Error: <%= error.message %>') 96 })) 97 .pipe(slim({ 98 require: 'slim/include', 99 pretty: true, 100 options: 'include_dirs=["docs/tmp/slim/inc"]' 101 })) 102 .pipe(gulp.dest('htdocs')) 103 .pipe(browserSync.stream()) 104}); 105 106// watch 107gulp.task('watch', () => { 108 gulp.watch(['docs/tmp/css/*.css'], ['css']); 109 gulp.watch(['docs/tmp/js/*.coffee'], ['coffee']); 110 gulp.watch(['docs/tmp/slim/**/*.slim'], ['slim']); 111}); 112 113// browser-sync 114gulp.task('browser-sync', () => { 115 browserSync({ 116 server: { 117 baseDir: 'htdocs', 118 middleware:[ 119 ssi({ 120 ext: '.html', 121 baseDir: 'htdocs' 122 }) 123 ] 124 } 125 }); 126}); 127 128// tinypng 129gulp.task('tinypng', () => { 130 gulp.src('docs/tmp/img/src/**/*.{png,jpg}') 131 .pipe(tinyping({ 132 key: '__API_Key__' 133 summarize: true 134 })) 135 .pipe(gulp.dest('docs/tmp/img/dist')) 136}); 137 138// imagemin 139gulp.task('imagemin', () => { 140 gulp.src('docs/tmp/img/src/**/*.{png,jpg,gif,svg}') 141 .pipe(imagemin([ 142 imagemin.gifsicle({interlaced: true}), 143 imagemin.jpegtran({progressive: true}), 144 imagemin.optipng({optimizationLevel: 4}), 145 imagemin.svgo({ 146 plugins: [ 147 {removeViewBox: false} 148 ] 149 }) 150 ])) 151 .pipe(gulp.dest('docs/tmp/img/dist')) 152}); 153 154// htmlhint 155gulp.task('htmlv', () => { 156 gulp.src('htdocs/*.html') 157 .pipe(htmlv()) 158 .pipe(htmlv.reporter()) 159}); 160 161// csslint 162gulp.task('cssv', () => { 163 gulp.src('htdocs/css/s.min.css') 164 .pipe(cssv({ 165 'adjoining-classes': false, 166 'box-model': false, 167 'box-sizing': false, 168 'bulletproof-font-face': false, 169 'compatible-vendor-prefixes': false, 170 'empty-rules': true, 171 'display-property-grouping': true, 172 'duplicate-background-images': false, 173 'duplicate-properties': true, 174 'fallback-colors': false, 175 'floats': false, 176 'font-faces': false, 177 'font-sizes': false, 178 'gradients': false, 179 'ids': false, 180 'import': false, 181 'important': false, 182 'known-properties': true, 183 'order-alphabetical': false, 184 'outline-none': true, 185 'overqualified-elements': false, 186 'qualified-headings': false, 187 'regex-selectors': false, 188 'shorthand': false, 189 'star-property-hack': false, 190 'text-indent': false, 191 'underscore-property-hack': false, 192 'unique-headings': false, 193 'universal-selector': false, 194 'unqualified-attributes': false, 195 'vendor-prefix': false, 196 'zero-units': true 197 })) 198 .pipe(cssv.formatter('compact')) 199});

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

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

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

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

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

s8_chu

2018/06/23 10:48

`package.json`, `gulpfile.js`の内容を追記していただけませんか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問