Skip to content

Gulp前端自动化工作流,ejs+sass+less+jsmin+imagesmin

License

Notifications You must be signed in to change notification settings

EasyTuan/gulp-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Gulp构建前端自动化工作流

已完成功能

  • sass && less的编译
  • ejs模版的编译(适用于模块化开发)
  • 样式、脚本、图片的压缩优化

什么是Gulp?

Gulp是基于Node.js的一个构建工具(自动任务运行器),开发者可以使用它构建自动化工作流程(前端集成开发环境)。 一些常见、重复的任务,例如:网页自动刷新、CSS预处理、代码检测、压缩图片、等等…… 只需用简单的命令就能全部完成。 使用它,可以简化工作,让你把重点放在功能开发上;同时减少人为失误,提高开发效率和项目质量,让专注更为专注。 如果你之前接触过Grunt,那上手Gulp就会觉得非常容易理解。

Gulp的核心API只有4个:src、dest、task、watch

  • gulp.src(globs[, options]):指明源文件路径 globs:路径模式匹配; options:可选参数;
  • gulp.dest(path[, options]):指明处理后的文件输出路径 path:路径(一个任务可以有多个输出路径); options:可选参数;
  • gulp.task(name[, deps], fn):注册任务 name:任务名称(通过 gulp name 来执行这个任务); deps:可选的数组,在本任务运行中所需要所依赖的其他任务(当前任务在依赖任务执行完毕后才会执行); fn:任务函数(function方法);

  • gulp.watch(glob [, opts], tasks):监视文件的变化并运行相应的任务 glob:路径模式匹配; opts:可以选配置对象; taks:执行的任务;

1. 如何运行

node版本 [8.0.0]

1.1 开发环境配置

# 安装 cnpm 命令行工具。
npm i -g cnpm --registry=https://registry.npm.taobao.org

# 安装依赖包
cnpm i

设计目录结构

我们将文件分为2类,一类是源码,一类是编译压缩后的版本。文件夹分别为 srcdist。(注意区分 dist 和 ·dest 的区别)

└── src/
│
└── dist/

dist/ 目录下的文件都是根据 src/ 下所有源码文件构建而成。

src/ 下创建前端资源对应的的文件夹

└── src/
	├── less/    *.less 文件
	├── sass/    *.scss *.sass 文件
	├── css/     *.css  文件
	├── js/      *.js 文件
	├── fonts/   字体文件
	├── images/   图片
	└── pages/   ejs文件,用于前端模块化开发(注:src/home.html为pages/home.ejs编译输出文件)
└── dist/

1.2 开发过程

1.2.1 命令

# 该命令会时时编译scss&&less ejs等文件,适用于前端出静态页面给到后端jsp、php时使用
npm run dev

# 该命令适用于前后端完全分离模式,前端最后压缩打包
npm run build

License

MIT

About

Gulp前端自动化工作流,ejs+sass+less+jsmin+imagesmin

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published