gulp 설치 + 패키징 + 병합에 대한 가장 자세한 설명

이번에는 gulp 설치 + 패키징 + 병합에 대한 가장 자세한 설명을 가져왔습니다. gulp 설치 + 패키징 + 병합 사용 시 주의사항 은 무엇입니까?

머리말

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

설치, 패키징 및 병합

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

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

node  -v ，有版本号，则正确安装。

2.安装淘宝镜像 ：命令行输入 ：

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

一路enter确定就行

7.web编辑器打开此gulp目录，如hbuilder、webstorm。

在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

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

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'))
   .ipe(autoprefix('last 2 versions'))
  .pipe(minifyCSS())
  .pipe(gulp.dest('styles'))
  });

목적: 다음 단계를 더 빠르게 진행합니다.

3. 전 세계적으로 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任务
});

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

명령줄 입력:

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

5. 로컬 꿀꺽꿀꺽 설치

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

6. package.json 파일 만들기

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目录

확인하려면 끝까지 입력하세요

7.webEditor

hbuilder, webstorm과 같은 gulp 디렉토리를 엽니다. gulp 디렉토리에 gulpfile.js 파일을 생성하세요

8. html, js, css, img

등 어떤 종류의 패키징과 압축을 결정합니다.

9.js 패키징

rrreee

10. node.js 입력

꿀꺽꿀꺽
gulp-concat 구성 요소가 설치되지 않았다는 오류 메시지가 표시됩니다. 설치 시작: cnpm install gulp-concat --save-dev

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

다시 실행: gulp🎜 여기서는 완료된 'default'를 볼 수 있습니다. 'default'는 gulp.task 작업을 시작하기 위한 기본 항목입니다. 여러 작업을 생성하고 다음과 같이 작업 이름을 수정하는 경우: 🎜rrreee🎜 재실행: 꿀꺽꿀꺽🎜🎜 결과: 🎜🎜 기본 작업만 실행되는 것을 볼 수 있습니다. 이것이 유일한 기본 gulp 실행 항목이기 때문입니다. 🎜🎜 다음과 같이 수정되었습니다 🎜rrreee🎜 설치되지 않은 구성 요소를 발견하면 해당 구성 요소의 작동 방법을 알아야 한다고 생각합니다. 🎜🎜 🎜11. 이미지 압축🎜🎜rrreee🎜 🎜12.html 압축🎜🎜rrreee🎜 🎜13. 경로 문제를 직접 수정하세요🎜🎜🎜 🎜🎜gulp가 js/css를 패키지하고 하나의 파일로 병합할 때 순서에 대한 솔루션🎜🎜🎜🎜 🎜1. 꿀꺽 주문을 사용하여 삽입할 수 있습니다. 🎜🎜🎜 2. 다음과 같이 작성할 수 있습니다: 🎜rrreee🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜js 및 jquery(코드 포함)를 사용하여 이미지 자동 로딩을 구현하는 방법🎜🎜🎜🎜🎜Vue2.0에서 사용자 권한을 운영하는 방법🎜🎜🎜🎜

위 내용은 gulp 설치 + 패키징 + 병합에 대한 가장 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!