🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
npm

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

Node.js

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

Q&A

1回答

2358閲覧

gulpでタスクを実行しようとするとserverが立ち上がりません。

niono

総合スコア0

npm

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

Node.js

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

0グッド

0クリップ

投稿2020/11/26 02:10

はじめまして。gulpのエラーに関してご教授をお願いします。
先方からpackage.json、gulpfile.jsをいただいてnpm installsiをして「npx gulp」とコマンドで入力したのですが、
サーバーが立ち上がりません。
npx gulpを実行すると下記画像の状態で止まってしまいます。

発生している問題・エラーメッセージ

エラーメッセージはありません

イメージ説明

該当のソースコード

gulpfile.js

// style.scssをタスクを作成する // gulpプラグインを読み込みます const { src, dest, watch } = require("gulp"); const sass = require("gulp-sass"); const sourcemaps = require('gulp-sourcemaps'); const plumber = require('gulp-plumber'); const notify = require('gulp-notify'); const bsync = require('browser-sync'); /** * Sassをコンパイルするタスクです */ const compileSass = () => // style.scssファイルを取得 src("./assets/scss/*.scss") // Sassのコンパイルを実行 .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) .pipe(sourcemaps.init()) .pipe(sass({outputStyle:'compressed'})) .pipe(sourcemaps.write("./")) // gulp.destの直前に指定 .pipe(dest("assets/css")); const browserSync = () => bsync({ server: { baseDir: "./" ,index : "index.html" } }); const browserReload = () => browserSync().reload(); // gulp.watch(paths.js + "**/*.js", ['reload']); // gulp.watch(paths.html + "**/*.html", ['reload']); // gulp.watch(paths.css + "**/*.css", ['reload']); /** * Sassファイルを監視し、変更があったらSassを変換します */ const watchFiles = () => { watch("assets/scss/*.scss", compileSass); watch(["assets/scss/*.scss", "assets/scss/*.js", "*.html" ], browserReload); } // npx gulpというコマンドを実行した時、watchSassFilesが実行されるようにします exports.default = watchFiles; // exports.default = () => { // watch(filesrc.html, html) // watch(filesrc.css, css) // }; exports.cps = compileSass; exports.bs = browserSync;
{ "name": "Site", "version": "1.0.0", "description": "xxxxxx", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/xxx/xxx.git" }, "keywords": [], "author": "", "license": "ISC", "bugs": { "url": "https://github.com//xxx/xxx.git" }, "homepage": "https://github.com/xxx/readme", "devDependencies": { "browser-sync": "^2.26.13", "gulp": "^4.0.2", "gulp-notify": "^3.2.0", "gulp-plumber": "^1.2.1", "gulp-sass": "^4.1.0", "gulp-sourcemaps": "^3.0.0", "node-sass": "^5.0.0" } }

試したこと

nodist削除、公式からNode.jsをインストールし最新で試してもダメでした。

補足情報(FW/ツールのバージョンなど)

npmバージョンは6.9.0
nodeバージョンは10.9.0

ディレクトリ構成
ディレクトリ
assets
index.html
gulpfile.js
package.json
package-lock.json

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

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

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

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

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

guest

回答1

0

exports.defaultで監視用の関数watchFilesしか呼び出していないので、サーバーが立ち上がらないのでしょう。

参考までに、僕が普段使ってるGulpファイル貼っておきますね。

JS

1var gulp = require('gulp') 2var sass = require('gulp-sass') 3var autoprefixer = require('autoprefixer') 4var notify = require('gulp-notify') 5var plumber = require('gulp-plumber') 6var browserSync = require('browser-sync') 7var reload = browserSync.reload 8var postcss = require('gulp-postcss') 9var cleanCSS = require('gulp-clean-css') 10var rename = require('gulp-rename') 11 12gulp.task("sass", function(done) { 13 gulp 14 .src("src/scss/**/*scss") 15 .pipe( // エラーチェック 16 plumber({ 17 errorHandler: notify.onError('Error: <%= error.message %>') 18 }) 19 ) 20 .pipe(sass()) // コンパイル 21 .pipe(postcss([ // ベンダープレフィックスの付与 22 autoprefixer({ 23 cascade: false 24 }) 25 ])) 26 .pipe(gulp.dest('src/css/')) 27 .pipe(browserSync.stream()) 28 .pipe(notify({ // コンパイル成功メッセージ 29 message: 'Finished sass' 30 })) 31 32 done() 33}) 34 35gulp.task("sassmini", function(done) { 36 gulp 37 .src("src/scss/**/*scss") 38 .pipe( // エラーチェック 39 plumber({ 40 errorHandler: notify.onError('Error: <%= error.message %>') 41 }) 42 ) 43 .pipe(sass()) // コンパイル 44 .pipe(postcss([ // ベンダープレフィックスの付与 45 autoprefixer({ 46 cascade: false 47 }) 48 ])) 49 .pipe(cleanCSS()) // コメント削除 50 .pipe(rename({ // リネーム 51 extname: '.min.css' 52 })) 53 .pipe(gulp.dest('src/css/')) 54 .pipe(browserSync.stream()) 55 .pipe(notify({ // コンパイル成功メッセージ 56 message: 'Finished sass' 57 })) 58 59 done() 60}) 61 62gulp.task("server", function(done) { 63 browserSync.init({ // browserSyncの初期設定 64 server: { 65 baseDir: 'src/', 66 index: 'html/index.html' 67 } 68 }) 69 70 done() 71}) 72 73gulp.task("watch", function(done) { 74 // sassに変更がされば、処理 75 gulp.watch('src/scss/**/*', gulp.series('sass', 'sassmini')) 76 // HTMLかJSに変更があれば、ブラウザを更新 77 gulp.watch(['src/html/*', 'src/js/*']).on("change", reload) 78 79 done() 80}) 81 82gulp.task("default", gulp.series("watch", "server"))

投稿2020/11/26 02:21

Nero1129

総合スコア130

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問