浅谈gulp创建完整的项目流程


Posted in Javascript onDecember 20, 2017

gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt。构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查、合并、重命名、压缩、格式化、浏览器自动刷新、部署文件等功能。

所有的环境都是在 node 安装好的基础上执行的。 node -v 查看node的安装情况。npm -v查看npm 的安装情况.

gulp自动化构建常用参数

1、src 读取文件或者文件夹

2、dest 生成文件也就是写文件

3、watch 检测文件

4、tesk 指定任务

5、pipe 用流的方式处理 gulp.

gulp创建一个完整的项目的目录结构如下

浅谈gulp创建完整的项目流程

解释:

bower_components 这个文件下边放的是 通过bower安装的第三方的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创建一个完整的项目流程就结束了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
javascript表单正则应用
Feb 04 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
官方推荐react-navigation的具体使用详解
May 08 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 #Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 #Javascript
详解JS模块导入导出
Dec 20 #Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 #Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 #Javascript
常用的9个JavaScript图表库详解
Dec 19 #Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 #Javascript
You might like
php 获取mysql数据库信息代码
2009/03/12 PHP
PHP 图片上传代码
2011/09/13 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
python实现感知器算法详解
2017/12/19 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
运动会广播稿200字
2014/01/15 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
六查六看心得体会
2014/10/14 职场文书
销售督导岗位职责
2015/04/10 职场文书
尊师重教主题班会
2015/08/14 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL
python playwrigh框架入门安装使用
2022/07/23 Python