gulp创建完整的项目流程
所有的环境都是在 node 安装好的基础上执行的。 node -v 查看node的安装情况。npm -v查看npm 的安装情况.
gulp自动化构建常用参数
1、src 读取文件或者文件夹
2、dest 生成文件也就是写文件
3、watch 检测文件
4、tesk 指定任务
5、pipe 用流的方式处理 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创建一个完整的项目流程就结束了
gulp创建完整的项目流程的更多相关文章
- vite创建vue3+ts项目流程
vite+vue3+typescript搭建项目过程 vite和vue3.0都出来一段时间了,尝试一下搭vite+vue3+ts的项目 相关资料网址 vue3.0官网:https://v3.vue ...
- idea创建普通java项目以及maven创建项目过程(转)
1. idea创建一个普通项目流程 http://blog.csdn.net/testcs_dn/article/details/52303941 2. idea创建maven项目流程 http:// ...
- Django 创建项目流程
django 项目创建流程 1 创建项目 cmd django-admin startproject 项目名称 pycharm file -- new project -- Django -- 项目名 ...
- 一个完整的项目中,需要的基本gulp
一个完整的项目需要使用gulp的多种功能,包括—— (1)加载各种需要的插件 var concat=require('gulp'); var clean=require(''gulp); 等等.需要的 ...
- ionic 项目中创建侧边栏的具体流程分4步简单学会
这是在学习ionic时,当时遇到的一些问题,觉得很难,就记笔记下来了,现在觉得如果可以拿来分享,有可能会帮助到遇到同样问题的人 ionic slidemenu 项目流程: cd pretices(自己 ...
- springmvc 项目完整示例02 项目创建-eclipse创建动态web项目 配置文件 junit单元测试
包结构 所需要的jar包直接拷贝到lib目录下 然后选定 build path 之后开始写项目代码 配置文件 ApplicationContext.xml <?xml version=" ...
- mobx项目创建 + mobx项目流程代码
一. 安装mobx 1. react 安装并 reject抽离配置 1. 全局安装 create-react-app 这个脚手架 npm/cnpm i create-react-app -g yarn ...
- 本页面用来演示如何通过JS SDK,创建完整的QQ登录流程,并调用openapi接口
QQ登录将用户信息存储在cookie中,命名为__qc__k ,请不要占用 __qc__k : 1) :: 在页面顶部引入JS SDK库: 将“js?”后面的appid参数(示例代码中的:100229 ...
- idea 创建 SSM + maven Java Web 项目流程
idea 创建 SSM + maven Java Web 项目流程 一.idea 中选择File,New Project 新建项目 二.选择Maven,勾选上面的Create from archety ...
随机推荐
- Cocos2d+C++运行出现中断的解决方法
原因是引入外部的文件不存在问题,一般是路径问题,例如引入的图片文件路径不存在.
- c++0x11新特性:delete删除函数
c_plus_plus_0x11.cpp: // c_plus_plus_0x11.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #inc ...
- elasticsearch实战 中文+拼音搜索
需求 雪花啤酒 需要搜索雪花.啤酒 .雪花啤酒.xh.pj.xh啤酒.雪花pj ik导入 参考https://www.cnblogs.com/LQBlog/p/10443862.html,不需要修改 ...
- 【ACM】hdu_1004_Let the Balloon Rise
Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- Sigma Function 数学 因子求和
Sigma function is an interesting function in Number Theory. It is denoted by the Greek letter Sigma ...
- [bzoj3038/3211]上帝造题的七分钟2/花神游历各国_线段树
上帝造题的七分钟2 bzoj-3038 题目大意:给定一个序列,支持:区间开方:查询区间和. 注释:$1\le n\le 10^5$,$1\le val[i] \le 10^{12}$. 想法:这题还 ...
- POJ 1474
半平面交模板 #include <iostream> #include <cstdio> #include <cstring> #include <algor ...
- logistic regression model
logistic regression model LR softmax classification Fly logistic regression model loss fuction softm ...
- 《ASP.NET》数据绑定——GridView
GirdView简单介绍: 名称:网络视图. 来源:GridView 是 DataGrid的后继控件.在.net framework 2 中,尽管还存在DataGrid,可是GridView已经走上了 ...
- Java系列之JDBC和ODBC之间的差别与联系
JDBC简单介绍 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于运行SQL语句的Java API,它是Java十三个规范之中的一个.能够为多种关系数据 ...