当前位置: 首页 > news >正文

gulp 教程

一.gulp安装和配置

1.安装

npm install --g gulp//全局安装
npm install --save-dev gulp//在项目中安装,node_modules
npm install --save-dev gulp-uglify//安装gulp 插件

2.创建gulpfile.js(注意:文件名必须是gulpfile,否则命令行下的gulp指令如何知道执行哪一个js文件呢?)

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

3.命令行执行gulp文件,$gulp

二.gulp 原理

  • gulp原理解析:数据流

三.gulp api

最简单的gulpfile.js

// 导入 gulp/gulp-sass/gulp-autoprefixer 三个模块
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

// 使用 gulp.task() 方法注册一个任务
// 第一个参数是任务名称
// 第二个参数是任务的执行逻辑
gulp.task('styles', function() {
    return gulp.src('sass/demo.scss')
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest('css'));
});

glup的5大函数

  • gulp.task(name, fn),注册一个 gulp 任务

  • gulp.run(...tasks),并行运行多个 gulp 任务

  • gulp.watch(glob, fn),实时监控内容,当 glob 内容变化时,执行 fn

  • gulp.src(glob),glob 是目标文件的路径,返回一个可读的 stream

  • gulp.dest(gloc),glob 是输出路径,返回一个可写的 stream

api
gulp.src('index.js');
gulp.src(['js/**/*.js', '!js/**/*.min.js']);//数组,制定多个文件
  • dest():dest方法将管道的输出写入文件,同时将这些输出继续输出,所以可以依次调用多次dest方法,将输出写入多个目录。如果有目录不存在,将会被新建

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

/*
*@param taskname 任务名称
*@param [] 任务依赖前置,必须执行完这个数组的任务,才可以执行任务
*@param fn 任务逻辑
*/
gulp.task('taskname', [ taskDep1, taskDep2 ],fn):
命令行 gulp taskname,即可执行gulp任务
注意:gulp.task('default',fn),是默认执行任务,在命令行启动gulp,默认执行动作


/*
*@param 检测文件路径
*@param 检测到文件变化,执行任务
*/
gulp.watch('文件路径', [task]):
gulp.task('watch', function() {
    gulp.watch('sass/demo.scss', ['styles']);
});

参考文章:
原理:http://www.jianshu.com/p/f5900e7de3eb

相关文章:

  • 虚拟化之vmx配置文件
  • 致北京
  • 二进制方式快速安装MySQL数据库
  • 沙盒 文件操作
  • PHP上传(单个)文件示例
  • UESTC 1246 拆x3
  • 积分显示算法(4.34.5 4.14 4.65)
  • linux中ssh免密码登录
  • postgresql cluster和correlation
  • 有限概率(拉普拉斯概率)
  • Android Stduio统计项目的代码行数
  • struts2获取web元素(request、session、application)
  • DVWA系列之4 利用SQLMap进行medium级别注入
  • Filter 过滤器
  • 剑指offer系列之七:斐波那契数列
  • 【Leetcode】101. 对称二叉树
  • 【108天】Java——《Head First Java》笔记(第1-4章)
  • 【从零开始安装kubernetes-1.7.3】2.flannel、docker以及Harbor的配置以及作用
  • 5、React组件事件详解
  • Angular 2 DI - IoC DI - 1
  • docker容器内的网络抓包
  • dva中组件的懒加载
  • ESLint简单操作
  • Java 网络编程(2):UDP 的使用
  • JavaScript新鲜事·第5期
  • 从零到一:用Phaser.js写意地开发小游戏(Chapter 3 - 加载游戏资源)
  • 对话 CTO〡听神策数据 CTO 曹犟描绘数据分析行业的无限可能
  • 工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
  • 湖北分布式智能数据采集方法有哪些?
  • ​2021半年盘点,不想你错过的重磅新书
  • ​水经微图Web1.5.0版即将上线
  • #NOIP 2014#Day.2 T3 解方程
  • #传输# #传输数据判断#
  • #在 README.md 中生成项目目录结构
  • $Django python中使用redis, django中使用(封装了),redis开启事务(管道)
  • (1)Map集合 (2)异常机制 (3)File类 (4)I/O流
  • (14)Hive调优——合并小文件
  • (2)STL算法之元素计数
  • (rabbitmq的高级特性)消息可靠性
  • (深度全面解析)ChatGPT的重大更新给创业者带来了哪些红利机会
  • (转)JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
  • (转)德国人的记事本
  • .bat批处理出现中文乱码的情况
  • .mat 文件的加载与创建 矩阵变图像? ∈ Matlab 使用笔记
  • .net core 源码_ASP.NET Core之Identity源码学习
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)
  • /proc/vmstat 详解
  • [1127]图形打印 sdutOJ
  • [2021ICPC济南 L] Strange Series (Bell 数 多项式exp)
  • [ACTF2020 新生赛]Upload 1
  • [C++]模板与STL简介
  • [Design Pattern] 工厂方法模式
  • [Grafana]ES数据源Alert告警发送
  • [Hadoop in China 2011] Hadoop之上 中国移动“大云”系统解析
  • [javaee基础] 常见的javaweb笔试选择题含答案