gulp 설치와 패키징, 병합에 대한 자세한 설명-JS 튜토리얼-php.cn

gulp 설치와 패키징, 병합에 대한 자세한 설명

小云云

풀어 주다： 2018-01-18 10:48:35

원래의

2817명이 탐색했습니다.

이 글에서는 주로 gulp에서 패키징 및 병합 방법을 구현하는 방법에 대한 튜토리얼을 소개하고, gulp에서 js/css를 패키징하여 하나의 파일로 병합할 때의 순서에 대한 솔루션을 샘플 코드를 통해 자세히 소개합니다. .필요한 친구들은 참고자료로 활용하고, 편집자를 따라가며 함께 배워보세요. 그것이 모두에게 도움이 되기를 바랍니다.

머리말

gulp는 프런트엔드 개발 프로세스에서 코드를 작성하는 도구입니다. 이는 웹 사이트 리소스를 최적화할 수 있을 뿐만 아니라 개발 프로세스 중 많은 반복 작업을 자동으로 완료할 수 있습니다. ; 올바른 도구를 사용하면 코드를 즐겁게 작성할 수 있을 뿐만 아니라 작업 효율성도 크게 향상됩니다.

설치, 패키징 및 병합

1. node.js 설치 다운로드 주소: http://nodejs.cn/

node.js 명령줄을 열고 다음을 입력하세요. node -v, 버전 번호가 있으면 올바르게 설치되었습니다.

2. Taobao 이미지 설치: 명령줄 입력:

npm install -g cnpm --registry=http://registry.npm.taobao.org

로그인 후 복사

목적: 다운로드 속도를 높입니다.

3. 전역적으로 gulp 설치

cnpm install --global gulp

로그인 후 복사

4. 디렉터리를 만들고 F 드라이브를 열고 gulp 폴더를 만듭니다.

명령줄 입력:

f:

cd gulp

로그인 후 복사

5. 로컬 gulp 설치

cnpm install --save-dev gulp

로그인 후 복사

6. package.json 파일 생성

cnpm init

로그인 후 복사

끝까지 입력하여 확인하세요

7. , 웹스톰.

gulp 실행의 진입점인 gulp 디렉터리에 gulpfile.js 파일을 생성합니다

8. 어떤 종류의 패키징 및 압축, html, js, css, img

9.js 패키징

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
});

로그인 후 복사

을 결정합니다.

10. Node.js 입력

gulp

은 gulp-concat 구성 요소가 설치되지 않았음을 나타내는 오류를 보고합니다. 설치 시작: cnpm install gulp-concat --save-dev

다시 실행: gulp

gulp-uglify 구성 요소가 설치되지 않았음을 나타내는 오류가 다시 보고됩니다. 설치 시작: cnpm install gulp-uglify --save-dev

다시 실행: gulp

. . . . . . . . . . . . . . .

성공하면

'default'가 완료된 것을 볼 수 있습니다. 'default'는 gulp.task 작업을 시작하기 위한 기본 항목입니다. 여러 작업 작업을 생성하고 다음과 같이 작업 이름을 수정하는 경우:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
 
　　gulp.task('style', function() { //task 任务名称为style
 
　　gulp.src('.css/*.css')
 
　　.pipe(concat('styles.css'))
 
　　.pipe(autoprefix('last 2 versions'))
 
　　.pipe(minifyCSS())
 
　　.pipe(gulp.dest('styles'));
 
　　});

로그인 후 복사

Rerun: gulp

Result:

기본 작업 작업만 실행되는 것을 확인할 수 있습니다. 이것이 유일한 기본 gulp 실행 항목이기 때문입니다.

수정 사항은 다음과 같습니다

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('js',function(){ 
 gulp.src('js/*.js') // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
 
　　gulp.task('style', function() { //task 任务名称为style
 
　　gulp.src('.css/*.css')
 
　　.pipe(concat('styles.css'))
 
　　.pipe(autoprefix('last 2 versions'))
 
　　.pipe(minifyCSS())
 
　　.pipe(gulp.dest('styles'));
 
　　});

<br>gulp.task('default',function(){
 gulp.run(['js','style']); //这里开始执行多个task任务
});

로그인 후 복사

설치되지 않은 구성 요소가 있으면 작동 방법을 알아야 할 것 같습니다.

11. 이미지 압축

var imagemin = require('gulp-imagemin');
gulp.task('img', function() {
 return gulp.src('imgs/*.png')
 .pipe(imagemin())
 .pipe(gulp.dest('miniImg'));
});

로그인 후 복사

12. HTML 압축

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function() {
 return gulp.src('../*.html')
 .pipe(htmlmin({collapseWhitespace: true}))
 .pipe(gulp.dest('../'));
});

로그인 후 복사

13. 경로 문제를 직접 수정하세요

gulp에서 js/css를 하나의 파일로 묶을 때 순서를 해결하세요

2. 다음과 같이 작성할 수 있습니다:

return gulp.src(['js/common.js','js/**/*.js'])
.pipe(concat('build.js'))//合成到一个js
.pipe(gulp.dest(buildBasePath+'js'))//输出到js目录
.pipe(uglify())//压缩js到一行
.pipe(concat('build.min.js'))//压缩后的js
.pipe(gulp.dest(buildBasePath+'js'));//输出到js目录

로그인 후 복사