1. src()
gulp モジュールの src メソッドは、データ ストリームの生成に使用されます。そのパラメータは処理されるファイルを表し、これらの指定されたファイルはデータ ストリームに変換されます。
js/app.js 指定确切的文件名 js/*.js 某个目录所有后缀名为js的文件 js/**/*.js 某个目录及其所有子目录中所有后缀名为js的文件 ！js/app.js 除了js/app.js以外所有文件 *.+(js css)匹配项目根目录下，所有后缀名为js或css的文件
src メソッドのパラメーターは、複数のメンバーを指定する配列にすることもできます
gulp.src(['js/**/*.js','!js/**/*.min.js'])
2 dest()
dest メソッドは、パイプラインの出力をファイルに書き込み、これらの出力を出力し続けるため、 dest メソッドを複数回使用して、出力を複数のディレクトリに書き込みます。ディレクトリが存在しない場合は再構築されます。
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/template'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));dest メソッドは、構成オブジェクト
gulp.dest('build',{
cwd:'./app',
mode:'0644'}) に 2 つのフィールドがあることを示す 2 番目のパラメーターを受け入れることもできます。 cwd フィールドはパスを書き込むためのベース ディレクトリを指定し、デフォルトは現在のディレクトリです。mode フィールドはファイルを書き込む権限を指定し、デフォルトは 0777 です。
3.task()
task メソッドが使用されます。特定のタスクを定義します。最初のパラメータはタスク名で、2 番目のパラメータはタスク関数です。
gulp.task('greet',function(){
console.log('Hello world');
});task メソッドでは、順番に実行する一連のタスクを指定することもできます。
gulp.task('build',['css','js','imgs']);
3 つのタスク (css、js、imgs) で構成されるタスク ビルドを指定します。 task メソッドは、これら 3 つのタスクを同時に実行します。各タスクは非同期で呼び出されるため、js タスクの実行開始時刻を保証する方法がないことに注意してください。
各タスクを厳密に順序どおりに実行したい場合は、1 つのタスクを次のタスクの依存モジュールとして作成できます。
gulp.task('css',['greet'],function(){
//deal with css here});cssタスクはgreetタスクに依存しているため、cssはgreet完了後に必ず実行されます。
タスクメソッドのコールバック関数は関数をパラメータとして受け取ることもできます。これは非同期タスクの実行に非常に役立ちます。
//执行shell命令var exec=require('child_process').exec;
gulp.task('jekyll',function(cb){//build jekyllexec('jekyll build',function(err){
if(err) return cb(err);//return error
cb();//finished task})
})タスクの名前がデフォルトの場合は、それがデフォルトのタスクであることを示します。コマンドラインで gulp コマンドを直接実行すると、タスクが実行されます。
gulp.task('default',function(){
//default task})//或者gulp.task('default',['styles','jshint','watch']);gulpを直接使用して実行すると、styles、jshint、watchの3つのタスクが実行されます。
4 watch()
watch メソッドは、監視する必要があるファイルを指定するために使用されます。これらのファイルが変更されると、指定されたタスクが実行されます。
gulp.task('watch',function(){
gulp.watch('templates/*.tmpl.html',['build']);
});このコードでは、テンプレート ディレクトリ内のテンプレート ファイルが変更されるとビルド タスクが実行されるように指定しています。
watch メソッドはコールバック関数を使用して指定されたタスクを置き換えることもできます
gulp.watch('templates/*.tmpl.html',function(event){
console.log('Event type: '+event.type);
console.log('Event path: '+event.path);
});別の書き方では、watch メソッドによって監視されているファイルが変更 (ファイルの変更、追加、削除) されると、変更イベントがトリガーされます、および変更イベントは、コールバック関数を指定できます
var watcher=gulp.watch('templates/*.tmpl.html',['build']);
watcher.on('change',function (event){ console.log('Event type: '+event.type); console.log('Event path: '+event.path);
});変更イベントに加えて、watch メソッドは次のイベントもトリガーできます
end コールバック関数の実行が完了するとトリガーされます
error エラーが発生したときにトリガーされます
ready ファイルの監視が開始されるとトリガーされます
nomatch なし 一致するウォッチ ファイルがあった場合にトリガーされます
ウォッチャー オブジェクトには他のメソッドも含まれます
watcher.end() はウォッチャー オブジェクトを停止し、タスクを呼び出されなくなりますまたは、コールバック関数
watcher.files() は、監視対象のファイルを追加するためにウォッチャー オブジェクト
watcher.add( glob) によって監視されているファイルを返します。また、コールバック関数
watcher.remove(filepath) を示す 2 番目のパラメーターを添付することもできます。 ) 監視対象ファイルをウォッチャー オブジェクトから削除します
5.gulp-livereload モジュール
gulp- livereload モジュールは、ブラウザを自動的に更新してソース コードの最新の変更を反映するために使用されます。モジュールに加えて、ソース コードの変更に対応するためにブラウザにプラグインをインストールすることも必要です。
var gulp=require('gulp'),
less=require('gulp-less'),
livereload=require('gulp-livereload'),
watch=require('gulp-watch');
gulp.task('less',function(){
gulp.src('less/*.less')
.pipe(watch("less/*.less") )
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(livereload());
})このコードは、less ファイルを監視するために使用されます。コンパイルが完了すると、ブラウザーが自動的に更新されます。
6 gulp-load-pluginsモジュール
一般に、gulpfile.jsのモジュールは1つずつロードする必要があります
var gulp=require('gulp'),
jshint=require('gulp-jshint'),
uglify=require('gulp-uglify'),
concat=require('gulp-concat');
gulp.task('js',function(){ return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
})gulpモジュールに加えて、コードは他の3つのモジュールもロードします
この方法gulp-load-plugins モジュールを使用して、package.json ファイル内のすべての gulp モジュールをロードします。
var gulp=require('gulp'),
gulpLoadPlugins=require('gulp-load-plugins'),
plugins=gulpLoadPlugins();
gulp.task('js',function(){ return gulp.src('js/*.js')
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter('default'))
.pipe(plugins.uglify())
.pipe(plugins.concat('app.js'))
.pipe(gulp.dest('build'));
})
この記事では、gulp モジュールのメソッドについて説明します。関連コンテンツについては、PHP 中国語 Web サイトを参照してください。
関連する推奨事項:
js は HTML を画像として生成し、ローカルに保存します
以上がgulp モジュールのメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
