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 前端构建工具使用的更多相关文章

  1. gulp 前端构建工具入门

    gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...

  2. Gulp前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp ...

  3. 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 ...

  4. 入门gulp前端构建工具

    1. 全局安装 gulp:(倘若之前电脑安装过,则跳过此步骤) $ cnpm install -g gulp 2. 作为项目的开发依赖(devDependencies)安装: (此步骤会自动在目录下创 ...

  5. 前端构建工具之gulp(一)「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

  6. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  7. 前端构建工具gulp介绍

    2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...

  8. Gulp.js----比Grunt更易用的前端构建工具

    Gulp.js----比Grunt更易用的前端构建工具 Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 prese ...

  9. Gulp, 比Grunt更好用的前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...

随机推荐

  1. Git 远程仓库分支管理

    目录 目录 速查表 关联远程代码仓库 克隆远程仓库 分支管理 创建分支 切换分支 合并分支 删除分支 解决冲突 速查表 指令 作用 git branch 查看分支 git branch newBran ...

  2. Spring源码由浅入深系列五 GetBean

    获取bean的过程如上图所示.下一章将继续图示讲解createBean的过程.

  3. MPU-6000 与 MPU-6050

    VLOGIC 是什么呢?

  4. decimate、end、interp、resample工具箱函数

  5. 【转】Java程序CPU飙升问题排查方法

    windows环境下cpu飙升问题 线上某台runtime机器(windows Server)cpu报警,这种情况初步就是代码里面死循环了,先把机器下线了保证不再有新的任务分配进来,然而cpu使用依然 ...

  6. shell 命令 链接文件 ln

    1. 创建软链接文件   [  ln -s 源文件   链接文件]     类似于windows下的快捷方式 [ ln -s expr.sh expr ] 此时创建的链接文件路径是相对于现在所在的路径 ...

  7. Android Button.getWidth()为0的问题

    View在onCreate的时候,没有渲染组件,所以获取到的宽度和高度为0, 需要添加一个观察者,在layout渲染后再去取宽高.代码如下: private Button btn_icon; @Ove ...

  8. Leetcode241.Different Ways to Add Parentheses为运算表达式设计优先级

    给定一个含有数字和运算符的字符串,为表达式添加括号,改变其运算优先级以求出不同的结果.你需要给出所有可能的组合的结果.有效的运算符号包含 +, - 以及 * . 示例 1: 输入: "2-1 ...

  9. 查看收到的邮件的来源ip以及包信息

    有时我们需要知道收到的邮件是从哪台服务器发送过来的,或者想知道该邮件的报文头是怎样的.以下以网易邮箱为例介绍如果抓取这些信息. 首先我们需要知道网易邮箱的访问服务器(拉协议),由于SMTP是推的协议, ...

  10. CSIC_716_20191125【面向对象编程--类以及类的实例化】

    面向对象编程:是一种编程思想 对象的定义:特征与功能的集合体 优点:可扩展性强 缺点:编程复杂度高,难度偏大 类的定义:一系列对象之间相同特征与技能的结合体 调用类的时候(实例化是时候),发生的事情: ...