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'})
구성 개체에 두 개의 필드가 있음을 나타내는 두 번째 매개변수도 허용할 수 있습니다. cwd 필드는 경로를 쓰기 위한 기본 디렉터리를 지정하며 기본값은 현재 디렉터리입니다. 모드 필드는 파일 쓰기 권한을 지정하며 기본값은 0777입니다.
3.task()
task 메서드가 사용됩니다. 특정 작업을 정의합니다. 첫 번째 매개변수는 작업 이름이고, 두 번째 매개변수는 작업 함수입니다.
gulp.task('greet',function(){ console.log('Hello world'); });
작업 메소드는 순서대로 실행될 작업 세트를 지정할 수도 있습니다.
gulp.task('build',['css','js','imgs']);
css, js 및 imgs의 세 가지 작업으로 구성된 작업 빌드를 지정하세요. 작업 메서드는 이 세 가지 작업을 동시에 실행합니다. 각 작업은 비동기적으로 호출되므로 js 작업이 실행되기 시작하는 시간을 보장할 수 있는 방법이 없습니다.
각 작업을 엄격하게 순서대로 실행하려면 하나의 작업을 다음 작업의 종속 모듈로 작성할 수 있습니다.
gulp.task('css',['greet'],function(){ //deal with css here});
CSS 작업은 Greeting 작업에 따라 달라지므로 반드시 Greeting이 완료된 후에 CSS가 실행됩니다.
작업 메서드의 콜백 함수는 함수를 매개변수로 받을 수도 있는데, 이는 비동기 작업을 실행하는 데 매우 유용합니다.
//执行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}) })
작업 이름이 default인 경우 해당 작업이 기본 작업임을 나타냅니다. 명령줄에서 직접 gulp 명령을 실행하면 작업이 실행됩니다.
gulp.task('default',function(){ //default task})//或者gulp.task('default',['styles','jshint','watch']);
실행 시 gulp를 직접 사용하면 styles, jshint, watch 세 가지 작업이 실행됩니다.
4 watch()
watch 메소드는 모니터링해야 하는 파일을 지정하는 데 사용됩니다. 이러한 파일이 변경되면 지정된 작업이 실행됩니다.
gulp.task('watch',function(){ gulp.watch('templates/*.tmpl.html',['build']); });
코드는 템플릿 디렉터리의 템플릿 파일이 변경되면 빌드 작업이 실행되도록 지정합니다.
감시 메소드는 콜백 함수를 사용하여 지정된 작업을 대체할 수도 있습니다
gulp.watch('templates/*.tmpl.html',function(event){ console.log('Event type: '+event.type); console.log('Event path: '+event.path); });
또 다른 작성 방법은 감시 메소드로 모니터링하는 파일이 변경(파일 수정, 추가, 삭제)될 때 변경 이벤트가 트리거되는 것입니다. , 변경 이벤트는 다음과 같습니다. 콜백 함수를 지정하세요
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)를 나타내는 두 번째 매개 변수를 연결할 수도 있습니다. ) 감시자 개체에서 모니터링되는 파일을 제거합니다.
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의 모듈은 하나씩 로드해야 합니다
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 모듈 외에도 코드는 세 개의 다른 모듈도 로드합니다
이런 식으로 로딩이 작성되었습니다. package.json 파일의 모든 gulp 모듈을 로드하려면 gulp-load-plugins 모듈을 사용하십시오.
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 중국어 홈페이지를 참고해주세요.
관련 권장 사항:
js는 html을 그림으로 생성하고 로컬에 저장합니다.
위 내용은 꿀꺽 꿀꺽 모듈 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!