浅谈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 图片上传按比例预览插件集合
May 28 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 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 用sock技术发送邮件的函数
2007/07/21 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
js实现3D旋转效果
2020/08/18 Javascript
在MAC上搭建python数据分析开发环境
2016/01/26 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python os.path模块常用方法实例详解
2018/09/16 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
python实现日志按天分割
2019/07/22 Python
django 消息框架 message使用详解
2019/07/22 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
浅谈django channels 路由误导
2020/05/28 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Python扫描端口的实现
2021/01/25 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
毕业生优秀推荐信
2013/11/26 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
丑小鸭教学反思
2014/02/03 职场文书
大学生校园创业计划书
2014/02/08 职场文书
小组名称和口号
2014/06/09 职场文书
初中班级口号
2014/06/09 职场文书
婚庆答谢词大全
2015/09/29 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android