> 웹 프론트엔드 > JS 튜토리얼 > Gulp를 시작하기 위해 알아야 할 사항

Gulp를 시작하기 위해 알아야 할 사항

php中世界最好的语言
풀어 주다: 2018-03-14 09:17:00
원래의
1381명이 탐색했습니다.

이번에는 꿀꿀을 시작하기 위해 알아야 할 것과 꿀꿀을 사용할 때 알아야 할 사항을 알려드리겠습니다.주의사항다음은 실제 사례입니다. 살펴보겠습니다.

1. 전역적으로 gulp 설치
1. 설명: gulp를 전역적으로 설치하는 목적은
2. 설치: 명령 프롬프트 실행

npm install gulp -g

3. 올바르게 설치됨: 명령 프롬프트에서

gulp -v

을 실행합니다. 버전 번호가 나타나면 올바르게 설치된 것입니다.
2. 프로젝트에 gulp 설치

npm install --save-dev gulp

-참고: gulp를 전역으로 설치하는 것은 gulp 작업을 수행하는 것이고, 로컬에 gulp를 설치하는 것은 gulp 플러그인의 기능을 호출하는 것입니다.
3. gulp의 특정 모듈을 설치합니다(gulp-less를 예로 들어, less 파일을 컴파일합니다)

npm install gulp-less --save-dev

4. 새로운 package.json 파일을 생성합니다

npm init

프롬프트에 따라 프로젝트 정보를 입력합니다.
5. 프로젝트 루트 디렉터리에 새 gulpfile.js 파일을 만듭니다. gulpfile.js는 gulp 프로젝트의 구성 파일이며 프로젝트 루트 디렉터리에 있는 일반 js 파일입니다(실제로 gulpfile.js도 가능). 다른 폴더에 배치) 파일 예제는 다음과 같습니다.

//导入工具包 require('node_modules里对应模块')var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');//定义一个testLess任务(自定义任务名称)gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css});
로그인 후 복사

gulp.task('default',['testLess', 'elseTask']) //기본 작업 elseTask를 다른 작업으로 정의합니다. elseTask 작업을 정의하지 않음 //gulp.task(name [, deps], fn) 작업 이름 정의: 작업 이름 deps: 종속 작업 이름 fn: 콜백 함수//gulp.src(globs[, options]) 작업 실행 처리 파일 글로브: 처리된 파일 경로(문자열 또는 문자열 배열)//gulp.dest(path[, options]) 처리 후 파일이 생성됩니다. path

6. 선택적 cnpm
1 참고: npm 설치 플러그이기 때문입니다. -in은 외국 서버에서 다운로드되며, 네트워크의 영향을 크게 받고, 예외가 발생할 수 있습니다. npm 서버가 중국에 있으면 좋을 것입니다. 따라서 우리가 공유하게 되어 기쁘게 생각하는 Taobao 팀이 이 작업을 수행했습니다. 공식 웹사이트에서: "이것은 완전한 npmjs.org 미러입니다. 공식 버전(읽기 전용) 대신 이것을 사용할 수 있습니다. 동기화 빈도는 현재 공식 서비스와 동기화되도록 하기 위해 10분마다 한 번씩입니다.
2. 공식 홈페이지: http: //npm.taobao.org;
3. 설치: npm install cnpm -g --registry=https://registry.npm.taobao 실행을 위한 명령 프롬프트 .org
; 참고: 버전 번호 cnpm -v를 확인하거나 설치 후 바로 사용하면 오류가 발생할 수 있습니다. npm과 마찬가지로 명령을 실행할 때 npm을 cnpm으로 변경하세요.

이 기사의 사례를 읽었을 것입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

mysql에 노드 연결을 구현하는 방법

JS 정규 표현식사용 방법

위 내용은 Gulp를 시작하기 위해 알아야 할 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿