gulp 前端构建工具使用
gulp 前端构建工具使用
1.新建一个web h5项目
2.准备好gulpfile.js文件
(1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_JZZOw
提取码:ec9b
(2)也可以创建一个这个文件,内容如下:
// http://www.gulpjs.com.cn/
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// 监视文件改动并重新载入
gulp.task('serve', function() {
browserSync({
server: {
baseDir: '.',
index:"login.html"
},
port: 3000
});
gulp.watch(['*.html', 'css/**/*.css', 'js/**/*.js'], {cwd: ''}, reload);
});
说明:
index:对应的是系统要的首页
port:对外开饭的端口
gulp.watch加载的资源css js
3.把这个文件复制到项目的根目录下
4.在终端下载gulp插件
npm install gulp
npm install browser-sync
前提是nodejs环境是安装好的,而且在webstorm中配置好的
4.开始配置gulp
注意:Tasks serve 选择node.exe
gulp 前端构建工具使用的更多相关文章
- gulp 前端构建工具入门
gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...
- Gulp前端构建工具
Gulp, 比Grunt更好用的前端构建工具 Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp ...
- gulp前端构建工具的搭建
我的机器: 3.13.0-32-generic #57-Ubuntu SMP Tue Jul 15 03:51:08 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux 1 ...
- 入门gulp前端构建工具
1. 全局安装 gulp:(倘若之前电脑安装过,则跳过此步骤) $ cnpm install -g gulp 2. 作为项目的开发依赖(devDependencies)安装: (此步骤会自动在目录下创 ...
- 前端构建工具之gulp(一)「图片压缩」
前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- 前端构建工具gulp介绍
2016年3月3日 10:46:08 晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...
- Gulp.js----比Grunt更易用的前端构建工具
Gulp.js----比Grunt更易用的前端构建工具 Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 prese ...
- Gulp, 比Grunt更好用的前端构建工具
Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...
随机推荐
- Git 远程仓库分支管理
目录 目录 速查表 关联远程代码仓库 克隆远程仓库 分支管理 创建分支 切换分支 合并分支 删除分支 解决冲突 速查表 指令 作用 git branch 查看分支 git branch newBran ...
- Spring源码由浅入深系列五 GetBean
获取bean的过程如上图所示.下一章将继续图示讲解createBean的过程.
- MPU-6000 与 MPU-6050
VLOGIC 是什么呢?
- decimate、end、interp、resample工具箱函数
- 【转】Java程序CPU飙升问题排查方法
windows环境下cpu飙升问题 线上某台runtime机器(windows Server)cpu报警,这种情况初步就是代码里面死循环了,先把机器下线了保证不再有新的任务分配进来,然而cpu使用依然 ...
- shell 命令 链接文件 ln
1. 创建软链接文件 [ ln -s 源文件 链接文件] 类似于windows下的快捷方式 [ ln -s expr.sh expr ] 此时创建的链接文件路径是相对于现在所在的路径 ...
- Android Button.getWidth()为0的问题
View在onCreate的时候,没有渲染组件,所以获取到的宽度和高度为0, 需要添加一个观察者,在layout渲染后再去取宽高.代码如下: private Button btn_icon; @Ove ...
- Leetcode241.Different Ways to Add Parentheses为运算表达式设计优先级
给定一个含有数字和运算符的字符串,为表达式添加括号,改变其运算优先级以求出不同的结果.你需要给出所有可能的组合的结果.有效的运算符号包含 +, - 以及 * . 示例 1: 输入: "2-1 ...
- 查看收到的邮件的来源ip以及包信息
有时我们需要知道收到的邮件是从哪台服务器发送过来的,或者想知道该邮件的报文头是怎样的.以下以网易邮箱为例介绍如果抓取这些信息. 首先我们需要知道网易邮箱的访问服务器(拉协议),由于SMTP是推的协议, ...
- CSIC_716_20191125【面向对象编程--类以及类的实例化】
面向对象编程:是一种编程思想 对象的定义:特征与功能的集合体 优点:可扩展性强 缺点:编程复杂度高,难度偏大 类的定义:一系列对象之间相同特征与技能的结合体 调用类的时候(实例化是时候),发生的事情: ...