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

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

ただいまの
回答率

90.34%

  • JavaScript

    17489questions

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

  • JSON

    1229questions

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

  • npm

    311questions

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

  • gulp

    289questions

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

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

受付中

回答 0

投稿 編集

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

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

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

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.8",
    "gulp": "^4.0.0",
    "gulp-changed": "^3.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^4.0.1"
  }
}
var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync'),
    cssimport = require('postcss-import'),
    cssmin = require('gulp-cssmin'),
    cssv = require('gulp-csslint'),
    cssvariables = require('postcss-css-variables'),
    colorfunction = require('postcss-color-function'),
    coffee = require('gulp-coffee'),
    concat = require('gulp-concat'),
    htmlv = require('gulp-htmlhint'),
    imagemin = require('gulp-imagemin'),
    mqpacker = require('css-mqpacker'),
    nested = require('postcss-nested'),
    notify = require('gulp-notify'),
    plumber = require('gulp-plumber'),
    postcss = require('gulp-postcss'),
    pump = require('pump'),
    rename = require('gulp-rename'),
    simplevars = require('postcss-simple-vars'),
    slim = require('gulp-slim'),
    ssi = require('browsersync-ssi'),
    tinyping = require('gulp-tinypng-compress'),
    uglify = require('gulp-uglify');

// default
gulp.task('default', ['watch', 'browser-sync']);

// concat
gulp.task('css.concat', () => {
  var plugins = [
  colorfunction,
  cssimport,
  cssvariables,
  mqpacker,
  nested,
  simplevars
  ];
  gulp.src('docs/tmp/css/*.css')
  .pipe(plumber({
    errorHandler: notify.onError('Error: <%= error.message %>')
  }))
  .pipe(postcss(plugins))
  .pipe(autoprefixer({
    browsers: ['last 2 version'],
    grid: true
  }))
  .pipe(concat('s.css'))
  .pipe(gulp.dest('docs/tmp/concat'))
});

// cssmin
gulp.task('cssmin', ['css.concat'], () => {
  gulp.src('docs/tmp/concat/s.css')
  .pipe(plumber({
    errorHandler: notify.onError('Error: <%= error.message %>')
  }))
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('htdocs/css'))
  .pipe(browserSync.stream())
});

// css
gulp.task('css', ['css.concat', 'cssmin']);

// coffee
gulp.task('coffee', () => {
  gulp.src('docs/tmp/js/*.coffee')
  .pipe(plumber({
    errorHandler: notify.onError('Error: <%= error.message %>')
  }))
  .pipe(coffee({bare: true}))
  .pipe(gulp.dest('htdocs/js'))
  .pipe(browserSync.stream())
});

// uglify
gulp.task('jsmin', (cb) => {
  pump(
    [
      gulp.src('htdocs/js/*js'),
      uglify(),
      rename({suffix: '.min'}),
      gulp.dest('htdocs/js/min')
    ],
    cb
  );
});

// slim
gulp.task('slim', () => {
  gulp.src('docs/tmp/slim/*.slim')
  .pipe(plumber({
    errorHandler: notify.onError('Error: <%= error.message %>')
  }))
  .pipe(slim({
    require: 'slim/include',
    pretty: true,
    options: 'include_dirs=["docs/tmp/slim/inc"]'
  }))
  .pipe(gulp.dest('htdocs'))
  .pipe(browserSync.stream())
});

// watch
gulp.task('watch', () => {
  gulp.watch(['docs/tmp/css/*.css'], ['css']);
  gulp.watch(['docs/tmp/js/*.coffee'], ['coffee']);
  gulp.watch(['docs/tmp/slim/**/*.slim'], ['slim']);
});

// browser-sync
gulp.task('browser-sync', () => {
  browserSync({
    server: {
      baseDir: 'htdocs',
      middleware:[
        ssi({
          ext: '.html',
          baseDir: 'htdocs'
        })
      ]
    }
  });
});

// tinypng
gulp.task('tinypng', () => {
  gulp.src('docs/tmp/img/src/**/*.{png,jpg}')
    .pipe(tinyping({
      key: '__API_Key__'
      summarize: true
    }))
    .pipe(gulp.dest('docs/tmp/img/dist'))
});

// imagemin
gulp.task('imagemin', () => {
  gulp.src('docs/tmp/img/src/**/*.{png,jpg,gif,svg}')
  .pipe(imagemin([
    imagemin.gifsicle({interlaced: true}),
    imagemin.jpegtran({progressive: true}),
    imagemin.optipng({optimizationLevel: 4}),
    imagemin.svgo({
      plugins: [
        {removeViewBox: false}
      ]
    })
  ]))
  .pipe(gulp.dest('docs/tmp/img/dist'))
});

// htmlhint
gulp.task('htmlv', () => {
  gulp.src('htdocs/*.html')
  .pipe(htmlv())
  .pipe(htmlv.reporter())
});

// csslint
gulp.task('cssv', () => {
  gulp.src('htdocs/css/s.min.css')
  .pipe(cssv({
    'adjoining-classes': false,
    'box-model': false,
    'box-sizing': false,
    'bulletproof-font-face': false,
    'compatible-vendor-prefixes': false,
    'empty-rules': true,
    'display-property-grouping': true,
    'duplicate-background-images': false,
    'duplicate-properties': true,
    'fallback-colors': false,
    'floats': false,
    'font-faces': false,
    'font-sizes': false,
    'gradients': false,
    'ids': false,
    'import': false,
    'important': false,
    'known-properties': true,
    'order-alphabetical': false,
    'outline-none': true,
    'overqualified-elements': false,
    'qualified-headings': false,
    'regex-selectors': false,
    'shorthand': false,
    'star-property-hack': false,
    'text-indent': false,
    'underscore-property-hack': false,
    'unique-headings': false,
    'universal-selector': false,
    'unqualified-attributes': false,
    'vendor-prefix': false,
    'zero-units': true
  }))
  .pipe(cssv.formatter('compact'))
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • s8_chu

    2018/06/23 19:48

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

    キャンセル

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

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

  • JavaScript

    17489questions

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

  • JSON

    1229questions

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

  • npm

    311questions

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

  • gulp

    289questions

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