NPM Gulp-Save-Dev 설치
Gulp 란 무엇입니까?
Gulp는 새로운 세대의 프론트 엔드 프로젝트 구축 도구입니다. GULP 및 플러그인을 사용하여 프로젝트 코드 (Less, SASS)를 컴파일하고 JS 및 CSS 코드를 압축하고 이미지를 압축 할 수도 있습니다. Gulp에는 소량의 API 만 있으므로 배우기가 매우 쉽습니다. Gulp는 스트림을 사용하여 컨텐츠를 처리합니다. 노드는 Bower, Yeoman, Grunt 등과 같은 여러 자동화 도구를 스폰했습니다.
Gulp와 Grunt의 유사점과 차이점
사용하기 쉬운 : 구성 전략을 통해 코드를 사용하여 Gulp는 간단하고 복잡한 작업을 관리 할 수있는 간단한 것들을 유지합니다.
효율적 : Node.js의 강력한 스트림을 활용하면 중간 파일을 디스크에 작성하지 않고도 구조를 더 빨리 완료 할 수 있습니다.
고품질 : Gulp의 엄격한 플러그인 가이드 라인이 플러그인이 간단하고 예상대로 작동하는지 확인합니다.
쉽게 배우기 : API를 최소화하면 아주 짧은 시간 안에 Gulp를 배울 수 있습니다. 빌드 작업은 당신이 상상했던 것과 같습니다. 일련의 흐름 파이프 라인입니다.
Gulp는 Node.js로 작성되었으므로 터미널에 NPM을 설치해야합니다. NPM은 Node.js 패키지 관리자이므로 먼저 컴퓨터에 Node.js를 설치하십시오.
GULP 설치 명령
Sudo NPM 설치 -G Gulp
루트 디렉토리에서 새 package.json 파일을 만듭니다
npm init.
Gulp 패키지를 설치하십시오
설치 후 Gulp -V를 다시 입력하여 다음 그림과 같이 버전 번호를보십시오. 성공적입니다.
플러그인을 설치하십시오
일반적으로 사용되는 플러그인 설치 :
Sass의 편집 (Gulp-Ruby-sass)
CSS 접두사 자동 추가 (Gulp-AutoPrefixer)
압축 CSS (Gulp-Minify-CSS)
JS 코드 검증 (Gulp-jshint)
JS 파일 병합 (Gulp-Concat)
압축 JS 코드 (gulp-giglify)
압축 이미지 (Gulp-Imagemin)
페이지를 자동으로 새로 고침 (Gulp-rivereload)
이미지 캐시, 이미지가 교체 된 경우에만 (Gulp-Cache)
변경 알림 변경 (Gulp-Notify)
파일 지우기 (del)
이 플러그인을 설치하려면 다음 명령을 실행해야합니다.
코드 사본은 다음과 같습니다.
$ npm 설치 Gulp-Ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-guglify gulp-imagemin gulp-notify gulp-gulp-liver gulp-cache del-save-dev
-save 및 -save dev는 package.json 파일을 수동으로 수정하는 단계를 저장할 수 있습니다.
npm 모듈 -이름 -save 설치
종속성 섹션에 모듈과 버전 번호를 자동으로 추가합니다
NPM 설치 모듈 이름 -save-dev
DevDependencies 섹션에 모듈 및 버전 번호를 자동으로 추가합니다.
Gulp 명령
5 개의 Gulp 명령 만 알아야합니다
gulp.task (name [, deps], fn) 작업 이름 정의 : 작업 이름 DEP : 종속성 작업 이름 FN : 콜백 함수
gulp.run (작업 ...) : 가능한 한 많은 작업을 병렬로 실행합니다.
Gulp.Watch (Glob, FN) : 글로벌 컨텐츠가 변경되면 FN을 실행하십시오
gulp.src (glob) : 처리 할 파일의 경로를 배열 형식으로 여러 파일 일 수 있거나 규칙적 일 수 있습니다.
gulp.dest (path [, 옵션]) : 파일 생성 경로를 설정합니다
글로벌 : 직접 파일 경로가 될 수 있습니다. 그의 의미는 패턴 일치입니다.
Gulp에서 처리 할 파일은 파이프 라인 (Pipe ()) API를 통해 관련 플러그인을 안내합니다. 플러그인을 통해 파일 처리 작업을 실행하십시오.
gulp.task ( 'default', function () {...});Gulp.task API는 작업을 만드는 데 사용됩니다. 위의 작업을 수행하려면 명령 줄 (브래킷 옵션)에 $ gulp [기본값]을 입력 할 수 있습니다.
GULP 공식 API 문서 : https://github.com/gulpjs/gulp/blob/master/docs/api.md
Gulp Plug-In Collection : http://gulpjs.com/plugins/
프로젝트 구축을 시작하십시오
프로젝트 루트 디렉토리에서 새로운 gulpfile.js 파일을 만들고 다음 코드를 붙여 넣습니다.
// 프로젝트 루트 리 디렉토리에 Gulp 및 Uglify 플러그인을 소개합니다. var gulp = require ( 'gulp'); var uglify = require ( 'gulp-uglify'); gulp.task ( 'compress', function () {return gulp.src ( 'script/*. js') .pipe (uglify ()).참고 : gulpfile.js 파일 이름을 변경할 수 없습니다.
이 프로젝트는 uglify를 사용하고 플러그인 이름을 바꾸고 다음 명령을 실행하여 설치해야합니다.
NPM 설치-사브 DEV GULP-UGLIFYNPM 설치-사브 DEV GULP-RENAME
내 예를 들어, gulpile.js가있는 디렉토리를 입력하십시오.
CD/사용자/trigkit4/gulp-test
그런 다음 입력하십시오.
var gulp = require ( 'gulp'); var uglify = require ( 'gulp-uglify'); var rename = require ( 'gulp-rename'); gulp.task ( 'compress', function () {return gulp.src ( 'script/*. js') .pipe (uglify ()) (rename) .pipe (gulp.dest ( 'dist'));});이 명령은 다음 그림과 같이 package.json에 모든 종속성을 설치합니다.
완전한 gulpile.js
//로드 플러그인 var gulp = 요구 ( 'gulp'), sass = require ( 'gulp-ruby-sass'), autopRefixer = require ( 'gulp-autoprefixer'), minifycss = require ( 'gulp-minify-css'), jshint = reque ( 'gulp-jshint'), uglify = revire ( 'gulp-guglify') 요구 ( 'gulp-imagemin'), rename = require ( 'gulp-rename'), clean = require ( 'gulp-concat'), concat = require ( 'gulp-concat'), notify = require ( 'gulp-notify'), cache = require ( 'gulp-cache'), livereload = require ( 'gulp-vivereload'); // style gulp.task ( 'styles', function () {return gulp.src ( 'src/styles/main.scs') .pipe (sass ({{style : 'expeded',})) .pipe (AutoPrefixer ( 'last 2 버전', 'Safari 5', 'IE 8', '', '', ',', ',', ',', ',', ',', ',', ',', ',', ',', '' 4 ')) .pipe (gulp.dest ('dist/styles ')) .pipe (rename ({wiffix :'.min '})) .pipe (minifycss ()) .pipe (gulp.dest ('dist/styles ')) .pipe (notify ({styles task'});}); // script gulp.task ( 'scripts', function () {return gulp.src ( 'src/scripts/**/*. js') .pipe (concat ( 'main.js')) .pipe (gulp.dest ( 'dist/scripts')) .pipe (rename ({wiffix : '.min'})) .pipe (uglify ()) .pipe (gulp.dest ( 'dist/scripts')) .pipe (notify (scripts task ')); // image gulp.task ( 'images', function () {return gulp.src ( 'src/images/**/*') .pipe (cache (imagemin ({최적화 : 3, progressive : interlaced : true})) .pipe (gulp.dest ( 'dist/image'))) // gulp.task ( 'clean', function () {return gulp.src ([ 'dist/styles', 'dist/scripts', 'dist/images'], {read : false}) .pipe (clean ());}); // preset task gulp.task ( 'default', [ 'clean'], function () {gulp.start ( 'styles', 'scripts', 'images');}); // guard gulp.task ( 'watch', function () {// 모든 .scss 파일 gulp.watch ( 'src/styles/**/*. gulp.watch ( 'SRC/*. JS', [ 'Scripts']; gulp.watch ([ 'dist/**']). on ( 'change', function (file) {server.changed (file.path);}); });참고 : Pipe ()는 스트림 모듈에서 데이터 스트림을 전달하는 방법입니다. 첫 번째 매개 변수는 플러그인 메소드입니다. 플러그인은 업스트림에서 흐르는 파일을 받고 처리 한 다음 아래쪽으로 흐릅니다.
gulp.task ( 'task name', function () {return gulp.src ( 'file path') .pipe (...) .pipe (...) // 작업의 마지막 단계 (...);});Gulp 플러그인
Gulp-GH-Pages : Gulp를 사용하여 Markdown을 통해 HTML 문서를 생성하고 GIT 페이지에 업로드하십시오.
https://github.com/shinnn/gulp-gh-pages
var gulp = require ( 'gulp'); var ghpages = require ( 'gulp-gh-pages'); gulp.task ( 'deploy', function () {return gulp.src ( './ dist/**/*') .pipe (ghpages ());Gulp-Jade 플러그인 : Jade를 HTML 파일로 컴파일합니다
Gulp-Less 플러그인 : CSS 파일로 덜 컴파일합니다
var less = require ( 'gulp-less'); var path = require ( 'path'); gulp.task ( 'less', function () {return gulp.src ( './ less/**/*. less') .pipe ({paths : [path.join (__ dirname, 'less', 'contact'))) 필요 ( 'gulp'); var gls = 요구 사항 ( 'gulp-live-server'); gulp.task ( 'serv', function () {// 1. 기본 설정 var var server = gls.static (); // gls.static ( 'public', 3000); server.start (); // 2. serv var var server = gls.static ( 'dist', 8888); server.start (// 3.) '.tmp']); server.start (); Gulp.Watch를 사용하여 서버 조치 (통지, 시작 또는 중지)gulp-rivereload는 실시간으로 저장하고 새로 고침 할 수 있으므로 F5를 누르고 인터페이스를 전환 할 필요가 없습니다.
gulp-load-plugins : package.json 파일에 자동으로 임의의 Gulp 플러그인을 자동으로로드
$ NPM 설치-사브 DEV Gulp-Load-Plugins
예를 들어, 주어진 package.json 파일은 다음과 같습니다.
{ "종속성": { "gulp-jshint": "*", "gulp-concat": "*"}}gulpfile.js에 다음 코드를 추가하십시오.
var gulp = require ( 'gulp'); var gulploadplugins = require ( 'gulp-load-plugins'); var plugins = gulploadplugins (); plugins.jshint = require ( 'gulp-jshint'); plugins.concat = require ( 'gulp-concat');
Gulp-Babel : Gulp의 Babel 플러그인,
$ NPM 설치-사브 DEV-BABEL BABEL-PRESET-ES2015
사용 방법 :
const gulp = require ( 'gulp'); const babel = require ( 'gulp-babel'); gulp.task ( 'default', () => {return gulp.src ( 'src/app.js') .pipe ({presets : [ 'es2015']})) .pipe ( 'dist'));공식 github : https://github.com/gulpjs/gulp