Gulp를 사용하여 전체 프로젝트 프로세스를 만드는 방법

이 글은 주로 Gulp를 만드는 전체 프로젝트 과정에 대한 간략한 소개를 소개하고, 참고자료를 제공하겠습니다.

gulp는 프론트 엔드 개발 중에 자동으로 프로젝트를 빌드하는 도구입니다. 동일한 기능이 Grunt입니다. 빌드 도구는 플러그인을 사용하여 파일 변경 사항을 자동으로 모니터링하고 구문 검사, 병합, 이름 바꾸기, 압축, 형식 지정, 자동 브라우저 새로 고침 및 js/sass/less/html/image/css와 같은 파일 배포와 같은 기능을 완료합니다. /커피.

모든 환경은 노드 설치를 기준으로 실행됩니다. node -v 노드의 설치 상태를 확인합니다. npm -v npm의 설치 상태를 확인합니다.

1. src는 파일이나 폴더를 읽습니다.

2.dest는 파일을 생성합니다.

3. .tesk 작업 지정

5. 파이프는 스트리밍 방식으로 gulp를 처리합니다.

gulp는 다음과 같습니다. 디렉토리 구조는

이 파일 아래에는 타사 js가 설치되어 있습니다. 잠깐만요.

build : 프로젝트 통합 디렉터리. 일반적으로 모든 코드는 압축 없이 여기에 통합됩니다.

dist: 프로젝트 릴리스 디렉터리, 역시 모든 파일을 압축한 후입니다.

src: 프로젝트 소스 파일 디렉터리, 모든 소스 파일이 여기에 위치합니다.

test: 자동화된 테스트 작성을 위한 것입니다

1. 터미널에 프로젝트 루트 디렉터리를 입력하고 bower를 설치합니다.

bower init

Bower를 초기화하고 bower.json 파일을 생성한 다음 필요한 플러그인을 설치하고 세 번째- Angular 등의 파티 파일을 실행시켜

bower install - - save angular

Bower 사용법을 자세히 확인해보세요.

2. 프로젝트 루트 디렉터리에 gulp를 설치하고 봅니다.

전역적으로 gulp 설치

npm install --global gulp

그런 다음 구성 파일 생성

npm init package.json 파일 초기화 및 생성

npm install --save-dev gulp Node의 구성 환경을 구성 파일에 로드합니다.

그런 다음 필요한 플러그인을 설치하세요.

npm install xxx —save-dev가 자동으로 구성 파일에 파일을 작성합니다.

전체 사이트를 만들 때 흔히 사용하는 플러그인입니다. 플러그인이 여러 개인 경우 공백 형태로 플러그인을 구분할 수 있습니다.

npm install gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open  -—save-dev

그 다음에는 gulpfile.js 구성 파일을 작성하는 작업이 있습니다. 자세한 내용은 다음과 같습니다

//引入gulp
var gulp = require('gulp');
//这样的话 其他的模块可以直接使用 $ 符号来引入
var $ = require('gulp-load-plugins')();
var open = require('open');

//定义目录路径
var app = {
 //源代码，文件目录
 srcPath: 'src/',
 //文件整合之后的目录
 devPath: 'build/',
 //项目，发布目录上产部署
 prdPath: 'dist/'
};

//通过bower安装的插件，需要拷贝到 devPath prdPath中
gulp.task('lib',function(){
 // /**/* 读取这个文件夹下边的所有的文件或者文件夹
 gulp.src('bower_components/**/*')
 //读取完整后进行操作 西安拷贝到整合目录 并重命名，在拷贝到生产目录并重命名
 .pipe(gulp.dest(app.devPath + 'vendor'))
 .pipe(gulp.dest(app.prdPath + 'vendor'))
 .pipe($.connect.reload()); //文件更改后自动变异 并执行启动服务重新打开浏览器
});
//将 html 拷贝到 devPath prdPath中
gulp.task('html',function(){
 gulp.src(app.srcPath + '**/*.html')
 .pipe(gulp.dest(app.devPath))
 .pipe(gulp.dest(app.prdPath))
 .pipe($.connect.reload());
});
//将 模拟的json 文件 拷贝到 devPath prdPath中
gulp.task('json',function(){
 gulp.src(app.srcPath + 'data/**/*.json')
 .pipe(gulp.dest(app.devPath + 'data'))
 .pipe(gulp.dest(app.prdPath + 'data'))
 .pipe($.connect.reload());
});

//将 index.less 文件 拷贝到 devPath prdPath中，index.less引入了所有的其他的less
gulp.task('less',function(){
 gulp.src(app.srcPath + 'style/index.less')
 .pipe($.less())
 .pipe(gulp.dest(app.devPath + 'css'))
 .pipe($.cssmin())
 .pipe(gulp.dest(app.prdPath + 'css'))
 .pipe($.connect.reload());
});
// 拷贝 js 文件 将所有的源文件中的js 文件整合成index.js 然后拷贝过去
gulp.task('script',function(){
 gulp.src(app.srcPath + 'script/**/*.js')
 .pipe($.concat('index.js'))
 .pipe(gulp.dest(app.devPath + 'js'))
 .pipe($.uglify())
 .pipe(gulp.dest(app.prdPath + 'js'))
 .pipe($.connect.reload());
});

//拷贝 压缩 图片 最后放到发布目录下
gulp.task('image',function(){
 gulp.src(app.srcPath + 'image/**/*')
 //江源图片放到整合目录下，在压缩放到生产目录下
 .pipe(gulp.dest(app.devPath + 'image'))
 .pipe($.imagemin())
 .pipe(gulp.dest(app.prdPath + 'image'))
 .pipe($.connect.reload());
});

//总的方法
gulp.task('build',['image', 'script', 'less', 'json', 'html', 'lib']);

//清除旧文件，每次更新的时候
gulp.task('clean',function(){
 gulp.src([app.devPath,app.prdPath])
 .pipe($.clean());
})

//编写服务
gulp.task('serve',['build'], function() {
 $.connect.server({
  //服务起来的入口
  root: [app.devPath],
  //文件更改后自动刷新页面
  livereload: true,
  //端口号
  port: 1234
 });
 // 在 命令工具中执行 gulp serve 就相当于是启动了服务
 //自动打开浏览器
 open('http://localhost:1234');
 //我们希望更改了文件，就自动编译，并且打包等然后打开浏览器
 gulp.watch('bower_components/**/*' , ['lib']);
 //监听 script 下边的 js 文件，并执行 script 方法
 gulp.watch(app.srcPath + 'script/**/*.js', ['script']);
 gulp.watch(app.srcPath + '**/*.html', ['html']);
 gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
 gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
 gulp.watch(app.srcPath + 'image/**/*', ['image']);
 //这样文件变更了就会自动构建
});
//默认执行的任务，直接 执行 gulp 变行了。都编写完成后再终端 执行 gulp 便可以了。
gulp.task('default', ['serve']);

gulp를 사용하여 완전한 프로젝트 프로세스를 만드는 것이 완료되었습니다

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

부트스트랩 모달 상자 제출 버그에 대한 솔루션

webpack에서 실행되는 진입 기능의 자세한 해석

Vue에서 진입/탈퇴 애니메이션을 구현하는 방법

자세한 소개. js의 라우팅 및 미들웨어

위 내용은 Gulp를 사용하여 전체 프로젝트 프로세스를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!