꿀꺽 꿀꺽 모듈 방법

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을 그림으로 생성하고 로컬에 저장합니다.

js에서 함수를 정의하는 세 가지 방법

True in JS Fake' '

위 내용은 꿀꺽 꿀꺽 모듈 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!