前言

之前学完html的基础后就去学js框架了,每次都是用脚手架搭好的文件,在无形中体验了一波前端自动化带来的方便。然后前一段时间才开始学习前端自动化。

基本介绍

gulp说得简单一点就是一个自动化把前端的各种工具以流的方式一步一步的按照设置的规定加载的一个管理工具

装载

首先全局安装gulp

npm install --global gulp

然后你需要在根目录下创建一个名为gulpfile.js的文件
这个文件是gulp命令需要加载的文件,通过这个文件来处理预设的构建

使用

首先你可以在你的项目里面创建一些html和js文件,然后你的文件可以通过browserify来处理js的模块的文件,如果你每次修改js文件你需要每次都要在命令行里面运行browserify的处理。

gulp来自动化browserify

如果通过gulp来自动化构建的话,你可以在配置文件gulpfile.js里面添加一个task(任务)

gulp.task('mainjs', ()=>{
console.log('处理渲染')
browserify().add('./assets/js/index.js').bundle().pipe(fs.createWriteStream('./js/main.js'))
})

在此之前你需要引入gulp和browerifi同时引入fs来找到文件

作用是使用browerify来把index.js打包成main.js在html页面只需要加载main.js就好
然后你每次都只要运行gulp就可以了。

gulp来自动监听代码的变动

你需要通过gulp自带的watch方法
新建一个task来调用watch,然后你需要在监听到后重新渲染mainjs这个任务,
可以通过runSequence来在一个task中调用另一个task

gulp.task('watch', () => {
gulp.watch(['./assets/js/*.js'], ()=>{
//监听到后就重新渲染
runSequence('mainjs')
})
})

监听到了assets中的js中的所有的js的变动就会调用后面的箭头函数

结语

这里只是初步的尝试了一下gulp的作用,gulp是通过流一样的任务的模式来处理你之前定义的加载方式
同时你还可以处理css和构建第三方库
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

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

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

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

  8. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  9. 前端自动化构建工具gulp使用

    1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev ...

随机推荐

  1. python(For 循环语句)

    一.For循环 Python for 循环可以遍历任何序列的项目,如一个列表或者一个字符串或者字典等. 语法模式:for var in sequence: (1)从某个集合(列表等)里顺次取值 #遍历 ...

  2. python安装pycrypto库

    使用pycharm时安装pycrypto库,一直安装不上,提示安装成功,退出去一看,依旧没有 最后选择了pip安装,但一直报错(Microsoft Visual C++ 9.0 is required ...

  3. A. Powered Addition(二进制性质-思维)

    \(拿样例来看1 7 6 5\) \(6成长到7是最合理的,因为1s就可以实现而且对于后面来说最优\) \(5成长到7是最合理的,因为2s就可以实现而且对于后面最优\) \(发现了什么?二进制是可以组 ...

  4. 多表同步 ES 的问题

    原始需求 对跨业务域数据提供联查搜索能力. 比如:对退款单提供根据退款单.退款状态.发货状态的联查,其中退款状态和发货状态是跨业务域. 比如:对订单提供根据订单号.订单状态.退款状态的联查,其中订单状 ...

  5. 201771010113-李婷华 实验一 软件工程准备-<软件工程的相关了解>

    项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/nwnu2020SE 这个作业要求链接 https://www.cnblogs.com/nwnu- ...

  6. Coursera课程笔记----计算导论与C语言基础----Week 1

    计算机的基本原理(Week 1) 第一次数学危机 公元前500年,毕达哥拉斯学派,他们相信数是万物的本源:一切数均可表示成整数或者整数之比 然而毕达哥拉斯证明了勾股定理,某些直角三角形的三边比不能用整 ...

  7. 【HBase】表模型和基本操作介绍

    目录 HBase表模型 常用Shell操作 HBase表模型 创建一个hbase表,必须要有表名和列族名 列族 -- columnFamily,就是上图中的Column Family1 userInf ...

  8. 关于Fragment的点击切换数据滞留问题

    场景再现:当我使用tabLayout + Fragment 切换不同的fragment时,出现了数据重复显示的问题: 思考逻辑: - 每次切换fragment都会重新获取数据,但是list集合是全局的 ...

  9. CF#633 D. Edge Weight Assignment

    D. Edge Weight Assignment 题意 给出一个n个节点的树,现在要为边赋权值,使得任意两个叶子节点之间的路径权值异或和为0,问最多,最少有多少个不同的权值. 题解 最大值: 两个叶 ...

  10. python语法学习第三天--列表

    列表:python中不用定义类型,类似工厂 列表的创建: ①创建普通列表:[1,2],用逗号隔开 ②创建一个混合列表:[1,‘zyf',3.14,[1,2,3]] ③创建空列表:empty=[] 常用 ...