关键词：
前言
之前学完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构建前端自动化工作流之：常用插件介绍及使用
在对Gulp有了一个初步的了解之后，我们开始构建一个较为完整的Gulp开发环境。本文主要分为6个段落：1.构建项目目录结构（DirectoryStructureBuild）2.插件介绍及使用方法（Tasksanddependencies）3.扩展优化（Extend&OptimizeTask）4.其他插... 查看详情
前端笔试题之什么是gulp
什么是gulp？ 官网中这样写道：gulp是自动化构建工具。虽然经常有在用gulp，看了之后还是懵懵的。看了一下别人的理解，这样说道：Gulp是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（... 查看详情
学写网站前端配置之glup(代码片段)
前端使用gulp来自动化开发流程。gulp会非常方便进行前端管理。安装gulp：npminstallgulp-g#将gulp安装至全局因为在本地需要使用require的方式gulp。因此也需要在本地安装一份：npminstallgulp--save-dev #将gulp安装至本地，并保存至package.... 查看详情
如何选择javascript构建工具之babelbrowserifywebpackgrunt以及gulp(代码片段)
...Webpack能够打包JavaScript文件以及其相关的依赖使用Gulp能够自动化地将文件批量重命名，从而刷新静态资源文件的缓存那么，问题来了，前端构建工具那么多，为什么我偏偏推荐上述的这些呢？追根溯源我对很多流行的JavaScript构... 查看详情
gulp(自动化构建工具)(代码片段)
前言Gulp，简而言之，就是前端自动化开发工具，利用它，我们可以提高开发效率。比如： 1、 压缩js 2、 压缩css 3、 压缩less 4、 压缩图片 等等…我们完全可以利用Gulp来自动化地完成这些重... 查看详情
gulp自动化构建工具的使用(代码片段)
gulp自动化构建工具： 把前端开发常见的处理（“搬砖”）程序，通过一个工具模块管理起来，只需配置一次，达到自动处理目的，简化开发，提高效率!！ 安装： 1.全局安装(全局安装一个gulp命令) A.下载安装... 查看详情
gulp自动化构建的基本使用(代码片段)
...友喜欢，可以关注、收藏、点赞下本博主的文章。Gulp用自动化构建工具增强你的工作流程！gulp将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。基本使用安装gulpnpmigulp-D在项目根目录下创... 查看详情
gulp的使用流程(代码片段)
GULP的使用流程Gulp是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。一、建... 查看详情
gulp的使用之gulpfile.js文件的配置
...么文件:gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且... 查看详情
前端自动化之gulp
前题：1.安装好nodejs环境，或者nvm 2.安装npm包管理工具简介： 可以自动的将开发阶段的代码进行压缩、合并、编译、加密等处理，生成项目提交的代码。使用：gulpfile.js文件编写的api较少，只有5个，可查看api自行编写... 查看详情
用gulp构建你的前端项目
...如果还是人工去处理，效率非常之低且还容易出错，于是自动化的处理工具也就必然出现了。就像后端我们一般用maven管理项目，那么前端gulp是个不错的选择。 什么是gulp是一个基于Node.js流、Javascript语法的快速构建前端项目... 查看详情
node.js使用教程-2.gulp打包构建入门与使用(代码片段)
前言gulp是一个前端项目开发的自动化打包构建工具,类似的打包工具还有webpack。前端开发的过程中，会写到js文件，css文件，我们的项目如果想上线，那么一定要体积小一点，就需要对原始的代码进行编译压缩... 查看详情
前端自动化之项目搭建
1.先安装全局的gulp$npminstall--globalgulp2.npm初始化，在项目内创建package.json文件npminit3.项目文件路径下，将gulp安装到项目内。$npminstall--save-devgulp4.创建gulp主文件==》gulpfile.js 5.编写gulpfile.js测试代码：vargulp=require(‘gulp‘);gulp.ta 查看详情
前端自动化-----gulp详细入门(转)
...p;简介：gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且... 查看详情
前端开发自动化之gulp
前端开发自动化之gulp 在这里我们将用gulp来实现前端开发自动化,考虑到我们永远屹立的万里长城我们使用cnpm,同时本文内容以本人另一篇文章(http://www.cnblogs.com/izgl/p/6433105.html)为前提,请自行参考 在工程目录下打开cmd ... 查看详情
前端自动化之gulp
...端技术的不断发展和前端项目开发更新速度的要求，前端自动化越来越受到重视，之前传统的前端开发方式已经越来越不能满足开发的需求了，于是各种自动化工具随之产生了。而gulp就是其中一款非常强大的工具。1.安装node.js... 查看详情
gulp简单安装和入门(适用刚接触gulp的同学)(代码片段)
一、gulp 1、gulp主要用来在前端开发过程中对代码进行自动化构建的工具，能大大提高前端开发效率。 2、主要对js/sass/less/html/image/css等静态资源文件进行合并、压缩、格式化、浏览器自动刷新、部署文件生成、转换等操... 查看详情
gulp(代码片段)
...ystemgulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，不仅可以很愉快的编写代码，而且大大... 查看详情