# gulp_project_system
**Repository Path**: CC3688/gulp_project_system
## Basic Information
- **Project Name**: gulp_project_system
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-04-28
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# gulp project system
## gulp 前端工程目录结构
使用 gulp 来开发前端项目, 集成less, babel
## 项目结构
#### 项目目录说明
```
build 构建代码之后存放的目录 (拼接代码)
dist 产品发布的目录 (压缩代码)
src 源码存放目录 主要开发目录
data 存放 假数据 实际生产不需要,可以和后端联调
image 图片目录
script js文件目录 (此目录最终会被整合为一个脚本并压缩)
app.js 启动程序入口文件
style less文件目录
index.less 样式入口文件
view
template html片段目录
index.html 入口页面
```
#### 文件说明
总的来说,项目的各个文件,是通过拼接合并为一个,不像webpack是通过计算依赖,导出导入而成为一个有机的文件
这里,只是简单的拼接
##### 样式
index.less 是样式的入口文件, 所有的其它模块样式,需要在这里引入,才有效
最终是生成整个项目只生成一个 index.css文件
```
//index.less
@import 'variable.less';
@import 'property.less';
@import 'template/head.less';
@import 'template/foot.less';
@import 'me.less';
// 开发过程,可以分功能,分模块写样式,但都需要导入到这里
```
##### js文件
script 目录下, 最终会被合并为一个单一的文件,并命令为index.js
其实,就等于你一直只在一个文件里书写代码,并没有对各个文件对行模块化
##### html文件
需要分别导入 css 和 js 合成之后的那个最终文件
index.html
```
//由于 发布版 和 开发版 的目录结构一致,所可以你下面这样引入
//第三方保存 在 vendor目录下, 之后的目录 和原 bower 安装目录一致
//第三方都引用 min(压缩过的版本)
gulp_project_system
```
### 使用说明
默认已经安装好node npm 环境
默认已经全局安装bower 环境
### 安装教程
1. npm install 安装项目工程依赖
2. bower install 安装前端的依赖
3. npm run start 执行项目
### 使用到的gulp插件
安装gulp插件
```
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0",
"gulp-clean": "^0.4.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.5.0",
"gulp-cssmin": "^0.2.0",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^4.1.0",
"gulp-less": "^4.0.1",
"gulp-load-plugins": "^1.5.0",
"gulp-plumber": "^1.2.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.0",
"open": "0.0.5"
}
```
#### 各插件功能用途
@babel/core
@babel/preset-env
gulp-babel
gulp
gulp-clean 清空目录
gulp-concat 拼接js文件
gulp-cssmin 压缩css文件
gulp-imagemin 压缩图片
gulp-less 编译less文件
gulp-load-plugins 自动引用gulp插件,不需要用require来引入
gulp-plumber js,css出错时不退出程序,而是报错
gulp-uglify 压缩js文件
gulp-connect 服务器
open 打到测试网址
## gulpfile.js 的说明
查看,项目里的 gulpfile.js 和参考下面这个 来理解和使用 gulp
```
// 引入主文件 gulp 模块
const gulp = require('gulp');
// 引入需要用来处理特定任务的插件
//图片处理插件
const imagemin = require('gulp-imagemin');
//压缩文件
const uglify = require('gulp-uglify');
//处理sass
const sass = require('gulp-sass');
//合并文件
const concat = require('gulp-concat');
/*
gulp 是以文件流的方式来处理文件的,有.pipe()方法,
来把处理的文件流下一个方法处理
--Top level funtion
gulp.task -- define tasks
gulp.src -- point to files to use
gulp.dest -- points to folder to output
gulp.wathc -- watch files and folders for changes
*/
//Logs message
gulp.task('message',function(){
return console.log('gulp is running...');
});
//在终瑞中 输入 gulp message 就会运行这个message名
//此任务只指定了源文件,然后产生到指定的文件夹中,中间没有任何其他操作.
gulp.task('copyHtml',function(){
gulp.src('src/*.html')
.pipe(gulp.dest('dist'));
});
//如果 任务 需要做一此特殊的处理,就要用到插件,插件需要先安装到开发依赖,然后引入此文件里
//如 gulp-imagemin
gulp.task('imageMin', () =>
gulp.src('src/images/*') //指定源,导入到gulp,形成流
.pipe(imagemin()) //pipe 把文件流交流imgemin()处理 后又形成流
.pipe(gulp.dest('dist/images')) //流 又交到gulp dest 处理,生成最终文件
);
// mimify js
gulp.task('minify',function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
//compile sass
gulp.task('sass',function(){
gulp.src('src/sass/*.scss')
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest('dist/css'))
});
//script
gulp.task('scripts',function(){
gulp.src('src/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
gulp.task('default',['message','copyHtml','imageMin','sass','scripts']);
//默认任务,如果运行gulp 没有指定任务名(task函数第一个参数就是任务名),就运行这个默认的
//第二个参数,可以是一个函数,那就和上面的普通任务没什么区别,就运行所在的函数指定的任务
//第二个参数,也可以是一个数组,数组项可以是各个 任务的名字(sting) 然后,gulp 就可以一次
//执行数组里的任务
//watch 任务,就可以在指定的 文件改变时 自动运行 特定的任务
gulp.task('watch',function(){
gulp.watch('src/js/*.js',['scripts']);
gulp.watch('src/images/*',['imageMin']);
gulp.watch('src/sass/*.scss',['sass']);
gulp.watch('src/*.html',['copyHtml']);
});
```