1.使用gulp的步骤

1.安装node
检测是否安装好 cmd->node -v
2.安装gulp 可以在npm或者在cnpm
3.在node里面有个文件package.json.利用命令行npm init
4.本地安装插件,在这个文件夹中,直接在npm下载下来
5.在文件夹中新建一个gulpfile.js(名字必须是这个),其他的代码都是写在这个xxx.js的文件中的

2.基本语法
gulp.task("defult",function(){
        return gulp.src(源文件夹)
        .pipe(插件名称())
        .pipe(插件名称())
        .pipe(gulp.dest(目标文件夹))
    });
    gulp.task("min",function(){
        return gulp.src(源文件夹)
        .pipe(插件名称())
        .pipe(插件名称())
        .pipe(gulp.dest(目标文件夹))
 });

//gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径

gulp的基础语法
1.gulp.task('任务名称',‘依赖任务’,函数);
注意:依赖任务并行执行,然后运行任务名称
2.gulp.src()
3.gulp.dest()
4.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 就是监视文件的变化,然后运行指定的Tasks或者函数,

3.运行gulp
gulp 任务名称

4.为什么采用gulp
gulp和grunt的区别
gulp 基于流 配置优先 1000+插件
grunt 基于文件 代码优先 3900+插件
这个相比Grunt需要使用插件,gulp本身就支持的很好。

其他的就是练习就成了!!!

自动化构建工具gulp的基础了解的更多相关文章

  1. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  2. 前端自动化构建工具——gulp

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

  3. 前端自动化构建工具 Gulp 使用

    一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...

  4. 前端自动化构建工具--Gulp&&Webpack

    前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...

  5. 前端自动化构建工具 gulp 学习笔记 一、

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  6. 基于流的自动化构建工具------gulp (简单配置)

    项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了 ...

  7. 前端自动化构建工具-gulp

    gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略, ...

  8. 前端自动化构建工具——gulp环境搭建教程

    gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...

  9. 自动化构建工具gulp简单介绍及使用

    一.简介及安装: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快 ...

随机推荐

  1. 给WPF的MessageBox启用视觉样式

    WPF的MessageBox为什么会这样 我的一个同学跟我说:“WPF不是新一代技术吗?怎么连MessageBox都没WinForm 的好看?” 上图是Windows Forms 的MesssageB ...

  2. JavaScript -- 常用的数组及字符串方法

    数组 var arr= new Array(); arr.push(); //在数组尾部添加一个元素,返回新的长度 *原数组发生变化 arr.pop(); //删除最后一个元素,返回的是被删除的元素 ...

  3. webpack@3.6.0(2) -- css及图片相关问题

    本篇内容 css3前缀处理postcss 消除未使用的css部分 图片处理 css分离和分离后的图片处理 css3前缀处理postcss cnpm i -D postcss-loader autopr ...

  4. webpack@3.6.0(3)-- 优化

    本篇内容 babel配置 打包调试 第三方资源引入 静态资源的集中输出 babel配置 cnpm i -D babel-core babel-loader babel-preset-es2015 // ...

  5. App裂变活动多种玩法解析

    移动互联网时代,流量为王.在App获取流量的过程中,有资金的砸广告,没资金的铺渠道,但是不管你有钱没钱,社交平台都是必须重点争夺的流量阵地. 毕竟,截至2018年底,微信及WeChat的合并月活跃账户 ...

  6. 帝都Day6——图论

    //P2O5呢? 一.图的存储: 邻接矩阵:邻接表. 邻接矩阵:n*n的[][],[i][j]节点有边记1没边0 缺点 空间复杂度O(n^2) 占用内存较大(我为什么要把这些东西写到这里呢???) 邻 ...

  7. 迎接仪式 dp

    题目描述 LHX教主要来X市指导OI学习工作了.为了迎接教主,在一条道路旁,一群Orz教主er穿着文化衫站在道路两旁迎接教主,每件文化衫上都印着大字.一旁的Orzer依次摆出“欢迎欢迎欢迎欢迎……”的 ...

  8. Git练习3 远程库分支 idea中状态条显示当前分支

  9. 1、python简单介绍

    写在前面:曾经与java擦肩而过,现在懊悔很深,希望自己通过学习python,熟练掌握python,来弥补曾经的愚蠢.python简单介绍 python 1989年年底诞生,截止2017年,已经是IT ...

  10. 我在B站学习 清华大学教授带你学习c++(进阶)类与对象

    B站av11459203的一系列视频,跳过了基础篇直接进入进阶,从此难度开始加大.这里做出一些笔记分享一下. 我是1.25速度看的..对应分P 34-36 对象:现实中对象的模拟,具有属性和行为,对象 ...