タグ付けされた質問 「gulp」

GulpはJavaScriptビルドシステムであり、GruntのようなNode.jsベースのタスクランナーです。Gulpは、ストリームとコードオーバー構成を使用して、よりシンプルで直感的なビルドプロセスを実現します。


8
エラーがgulpウォッチを壊す/クラッシュさせるのを防ぎます
gulp 3.6.2を実行していて、オンラインのサンプルから設定された次のタスクがあります gulp.task('watch', ['default'], function () { gulp.watch([ 'views/**/*.html', 'public/**/*.js', 'public/**/*.css' ], function (event) { return gulp.src(event.path) .pipe(refresh(lrserver)); }); gulp.watch(['./app/**/*.coffee'],['scripts']); gulp.watch('./app/**/*.scss',['scss']); }); CoffeeScriptのgulpウォッチでエラーが発生したときはいつでも停止します。 他の場所で推奨されているように、私はこれを試しました gulp.watch(['./app/**/*.coffee'],['scripts']).on('error', swallowError); gulp.watch('./app/**/*.scss',['scss']).on('error', swallowError); function swallowError (error) { error.end(); } しかし、それは機能していないようです。 何が悪いのですか? @Aperçuの回答に応じて、私は自分のswallowError方法を変更し、代わりに次のことを試しました: gulp.task('scripts', function () { gulp.src('./app/script/*.coffee') .pipe(coffee({ bare: true })) .pipe(gulp.dest('./public/js')) .on('error', swallowError); }); …
178 node.js  gulp 

10
Gulpを実行できません:モジュール 'gulp-util'が見つかりません
Windows 7では、ここで説明されているようにgulpをインストールしました:http : //markgoodyear.com/2014/01/getting-started-with-gulp/: npm install gulp -g 私のアプリフォルダー: npm install gulp --save-dev gulpfile.jsファイルを作成します。 しかし、実行しようとするとgulp、次のエラーメッセージが表示されます。 module.js:340 throw err; ^ Error: cannot file module 'gulp-util' at Function.Module._resolveFilename (module.js:338:15) 等 しかしgulp-util、次の場所に存在します(ローカルアプリフォルダー内): node_modules gulp node_modules gulp-util 原因は何ですか?
169 node.js  npm  gulp 

4
gulpでディレクトリを再帰的にコピーするにはどうすればよいですか?
作業ディレクトリからサーバー(同じマシン)にプロジェクトをステージングしようとしています。次のコードを使用します。 gulp.src([ 'index.php', 'css/**', 'js/**', 'src/**', ]) .pipe(gulp.dest('/var/www/')); コピーされたすべてのファイルが表示されると思います。ただし、dir構造はフラット化されます-すべてのディレクトリがコピーされますが、すべてのファイルはルートに配置されます/var/www Gulpは優れたビルドツールのように見えますが、アイテムのコピーは確かに単純なプロセスでなければなりませんか?
167 deployment  gulp 

5
Gulp + WebpackまたはJUST Webpack?
webpackでgulpを使用している人がいます。しかし、私はwebpackを読んでgulpを置き換えることができますか?私はここで完全に混乱しています...誰かが説明できますか? 更新 結局、gulpから始めました。私はモダンなフロントエンドに不慣れで、すぐに立ち上げて実行したいと思っていました。1年以上たって足がかなり濡れたので、webpackに移動する準備ができました。同じ靴で始める人には同じルートを勧めます。あなたがwebpackを試すことができないと言っているのではなく、それが複雑であると思われる場合は、最初にgulpから始めてください... gulpが不要な場合は、うんざりしますが、package.jsonでコマンドを指定し、最初に起動して実行するだけのタスクランナーなしでコマンドラインからそれらを呼び出すこともできます。例えば: "scripts": { "babel": "babel src -d build", "browserify": "browserify build/client/app.js -o dist/client/scripts/app.bundle.js", "build": "npm run clean && npm run babel && npm run prepare && npm run browserify", "clean": "rm -rf build && rm -rf dist", "copy:server": "cp build/server.js dist/server.js", "copy:index": "cp src/client/index.html dist/client/index.html", "copy": "npm …
161 node.js  webpack  gulp 

9
改行は 'LF'であると予期されていましたが、 'CRLF'の改行スタイルが見つかりました
gulpプロジェクトでeslintを使用すると、このようなエラーの問題が発生 Expected linebreaks to be 'LF' but found 'CRLF' linebreak-styleし、実行中のgulpにWindows環境を使用しています。エラーログ全体は以下のとおりです。 Kiran (master *) Lesson 4 $ gulp Using gulpfile c:\Users\Sai\Desktop\web-build-tools\4\ gulpfile.js Starting 'styles'... Finished 'styles' after 17 ms Starting 'lint'... 'lint' errored after 1.14 s ESLintError in plugin 'gulp-eslint' sage: Expected linebreaks to be 'LF' but found 'CRLF'. ails: fileName: …

7
Gulps gulp.watchは、新規または削除されたファイルに対してトリガーされませんか?
次のGulpjsタスクは、glob一致のファイルを編集するときに正常に機能します。 // watch task. gulp.task('watch', ['build'], function () { gulp.watch(src + '/js/**/*.js', ['scripts']); gulp.watch(src + '/img//**/*.{jpg,jpeg,png,gif}', ['copy:images']); gulp.watch(src + '/less/*.less', ['styles']); gulp.watch(src + '/templates/**/*.{swig,json}', ['html']); }); // build task. gulp.task('build', ['clean'], function() { return gulp.start('copy', 'scripts', 'less', 'htmlmin'); }); ただし、新しいファイルや削除されたファイルでは機能しません(トリガーされません)。行方不明のものはありますか? 編集:grunt-watchプラグインを使用しても機能しないようです: gulp.task('scripts', function() { return streamqueue( { objectMode: true }, …
151 javascript  node.js  gulp 

6
gulp.src()で現在のファイル名を取得します
私のgulp.jsファイルでは、すべてのHTMLファイルをexamplesフォルダーからフォルダーにストリーミングしていbuildます。 gulpタスクを作成することは難しくありません: var gulp = require('gulp'); gulp.task('examples', function() { return gulp.src('./examples/*.html') .pipe(gulp.dest('./build')); }); しかし、タスクで見つかった(および処理された)ファイル名を取得する方法がわかりません。または、適切なプラグインが見つかりません。
138 gulp 

3
Gulp.jsタスク、srcに戻りますか?
私はgulpを使うのが初めてで、セットアップの例を調べています。一部の人々は以下の構造を持っています: gulp.task("XXXX", function() { gulp.src(".... 他の人はこれを持っています: gulp.task("XXXX", function() { return gulp.src(".... 私はsrc のリターンがどのような違いを生むのかと思っていますか?
132 javascript  node.js  gulp 

5
Gulpエラー:タスクの監視は関数でなければなりません
ここに私のgulpfileがあります: // Modules & Plugins var gulp = require('gulp'); var concat = require('gulp-concat'); var myth = require('gulp-myth'); var uglify = require('gulp-uglify'); var jshint = require('gulp-jshint'); var imagemin = require('gulp-imagemin'); // Styles Task gulp.task('styles', function() { return gulp.src('app/css/*.css') .pipe(concat('all.css')) .pipe(myth()) .pipe(gulp.dest('dist')); }); // Scripts Task gulp.task('scripts', function() { return gulp.src('app/js/*.js') .pipe(jshint()) …
125 javascript  gulp 

6
Gulpを使用したファイルの連結とUglify
私はGulpを使用して次のことを試みています: 3つの特定のJavaScriptファイルを取得して連結し、結果をファイル(concat.js)に保存します この連結されたファイルを取り、uglify / minifyしてから、結果を別のファイル(uglify.js)に保存します。 これまでに次のコードがあります var gulp = require('gulp'), gp_concat = require('gulp-concat'), gp_uglify = require('gulp-uglify'); gulp.task('js-fef', function(){ return gulp.src(['file1.js', 'file2.js', 'file3.js']) .pipe(gp_concat('concat.js')) .pipe(gp_uglify()) .pipe(gulp.dest('js')); }); gulp.task('default', ['js-fef'], function(){}); ただし、uglify操作が機能していないか、何らかの理由でファイルが生成されていないようです。 これを実現するにはどうすればよいですか?
124 gulp 

6
Gulpエラー:モジュール 'jshint / src / cli'が見つかりません
El Capitanのフレッシュインストールを取得し、これらのタスクランナーにもう一度挑戦します。 私はsitepointのGulp.jsの概要に従っていますが、ステップ4で立ち往生しています。実行しようとするgulp jshintと、「Error: Cannot find module 'jshint/src/cli'」が表示されます 何が原因かわからないので、ここで質問します。以下は、この問題を解決するための画面グラブです。 いつものように、私はどんなアドバイスにも永遠に感謝しています。

2
タスクランナー(Gulp、Gruntなど)およびBundlers(Webpack、Browserify)。なぜ一緒に使うの?
私はタスクランナーとバンドラーの世界では少し新しいです。 Grunt、Gulp、Webpack、Browserify 、両者に大きな違いがあるとは感じませんでした。言い換えれば、Webpackはタスクランナーが行うすべてのことを実行できると感じています。しかし、それでもgulpとwebpackが一緒に使用されている巨大な例がありました。理由が分からなかった。 これが初めてなので、間違った方向に進んでいる可能性があります。あなたが私が欠けているものを指摘することができればそれは素晴らしいでしょう。役立つリンクがあれば大歓迎です。 前もって感謝します。

10
ASP.NET Coreでnpmを使用する方法
ASP.NET Coreアプリケーションに必要なjQuery、Bootstrap、Font Awesomeなどのクライアントライブラリを管理するためにnpmを使用しています。 私にとってうまくいったアプローチは、package.jsonファイルをプロジェクトに追加することから始まりました。これは次のようになります。 { "version": "1.0.0", "name": "myapp", "private": true, "devDependencies": { }, "dependencies": { "bootstrap": "^3.3.6", "font-awesome": "^4.6.1", "jquery": "^2.2.3" } } npmはこれらのパッケージをプロジェクトディレクトリのwwwrootと同じレベルにあるnode_modulesフォルダーに復元します。 ASP.NET Coreがwwwrootフォルダーから静的ファイルを提供し、node_modulesがそこにないため、この作業を行うためにいくつかの変更を行う必要がありました。最初の変更は、スタートアップのapp.UseStaticFilesの直前にapp.UseFileServerを追加することです。 csファイル: app.UseFileServer(new FileServerOptions() { FileProvider = new PhysicalFileProvider( Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")), RequestPath = new PathString("/node_modules"), EnableDirectoryBrowsing = true }); app.UseStaticFiles(); 2つ目は、project.jsonファイルのpublishOptionsにnode_modulesを含めます。 "publishOptions": { "include": …

3
GulpでBrowserifyを使用して出力を醜くする方法は?
GulpでBrowserifyの出力を醜くしようとしましたが、動作しません。 gulpfile.js var browserify = require('browserify'); var gulp = require('gulp'); var uglify = require('gulp-uglify'); var source = require('vinyl-source-stream'); gulp.task('browserify', function() { return browserify('./source/scripts/app.js') .bundle() .pipe(source('bundle.js')) .pipe(uglify()) // ??? .pipe(gulp.dest('./build/scripts')); }); 私の理解では、次のような手順では作成できません。シーケンスを保持するために1つのパイプで作成する必要がありますか? gulp.task('browserify', function() { return browserify('./source/scripts/app.js') .bundle() .pipe(source('bundle.js')) .pipe(uglify()) // ??? .pipe(gulp.dest('./source/scripts')); }); gulp.task('scripts', function() { return grunt.src('./source/scripts/budle.js') .pipe(uglify()) .pipe(gulp.dest('./build/scripts')); …

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.