浅谈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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 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 多维数组排序(usort,uasort)
2010/06/30 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
python K近邻算法的kd树实现
2018/09/06 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
求职信模版
2013/11/30 职场文书
英文简历中的自我评价用语
2013/12/09 职场文书
公司晚会策划方案
2014/05/17 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
2016年元旦致辞
2015/08/01 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis