想要使用gulp,就要了解gulp,就像追自己的爱豆,你要知道爱豆的喜好、兴趣

简单的了解你的新爱豆———安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

1. gulp的用途:

  • 代码压缩

  • CSS自动加前缀

  • LESS编译

  • 地址版本追加

  • 文件合并

  • 文件修改自动刷新页面

  • 更新编译本地依赖静态资源自动加缓存戳避免客户端浏览器缓存

  看到这些作用,似乎gulpgrunt没什么区别

  然鹅,对于这两款作用相同的前端自动化构建工具,为什么更多的人更倾向于gulp呢?

  这就要从“性能”上来说了

  就像功能相同的两款手机:AppleSamsung

    Apple的使用人数显然要高过Samsung,因为Apple较之Samsung更安全,使用起来更方便

  那么,反观我们的gulp较之grunt这个款自动化构建工具:

  Grunt专注于配置Gulp专注于代码(写法更易于使用者接受)

  gulp的任务目标更明确,效率更快(gulp任务划分明确,当出现多个任务同步执行时,可以利用gulp中的时间监听来决定执行事件流。当然不管是gulp还是grunt都不建议一个task同时进行多个操作)

 

2. gulp的安装及使用:

  gulp需要在Node.js的环境下运行,所以gulp的插件需要npm来运行,麻蛋,不止是它,现在前端越来越多的东西都建立在node的基础上了~伤不起了啊

  使用Gulp需要先在项目下安装Gulp模块

  初始化项目环境

    npm init

  进入项目,安装gulp

    npm install gulp --save-dev

  在根目录下创建gulp配置文件gulpfile.js(gulp所有的任务都是在这里配置的)

    

  如果你已经坚持到了这里,那说明你离成功不远了

    ex:复制压缩一个css文件

    

    注:task是定义任务 src是需要打包的路径 dest是输出路径 pipe()是数据流的管道

  同grunt一样,gulp也要有保存开发插件的依赖——packge.json

    创建方式: 打开命令行进入开发的工作目录,输入 npm init 就会自动生成一个空的package.json文件

          过程中,你会觉得和使用vue的路程相似,填一堆信息,大概就是这样的:

          

    然鹅,这些都不重要,重要的是你要知道你生成packge.json的目的  嘿嘿嘿~

    好了,有位大神已经总结了一些常用的插件,至于其他的视项目而定吧

    

    gulp插件的安装:

      npm install <插件> -D

    注:-D 就是  --save-dev 是默认把该插件保存到本地的package.json的依赖中

          注:--save:将保存配置信息至package.json(package.json是nodejs项目配置文件

            -dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;一般保存在dependencies的像这些express/ejs/body-parser等等

      如果我们换了电脑,可以直接把这个带有依赖的package.json拿过来直接执行 npm isntall 就会把所有依赖的插件全部下载下来,所以最好是在下载的时候添加 -D

    

3.摒除以上的脏乱差的解说,我们举个通俗易懂的栗子吧——压缩js

  1.通过黑窗口cd到我们的项目

  2. npm init 生成packge.json这个文件,目的就是存放gulp的插件依赖(如果你像我一样懒,可以在第一次生成之后直接保存,以后直接拿过去用,根据需求做相应的改动就行了)

  

 {
"name": "gulp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.18.0",
"del": "^2.2.2",
"event-stream": "^3.3.4",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-concat": "^2.6.1",
"gulp-cssmin": "^0.2.0",
"gulp-htmlmin": "^4.0.0",
"gulp-imagemin": "^3.4.0",
"gulp-less": "^3.3.0",
"gulp-minify-css": "^1.2.4",
"gulp-minify-inline-scripts": "^0.0.6",
"gulp-obfuscate": "^0.2.9",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-sass": "^3.0.0",
"gulp-uglify": "^2.1.2",
"gulp-url-replace": "^1.0.2",
"imagemin-pngquant": "^5.0.0",
"webchen-ddky-append": "^0.1.8"
}
}

  3. npm install <name> --sava-dev 安装你的插件(会自动生成node_modules文件,里面主要存放的就是你的插件啦)

    注:如果你有配置好的packge.json文件,直接放到了项目里,那就不用一个一个安装插件啦,直接npm install就行

      如果你觉得一个一个安装插件太麻烦,可以npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev的方式,一次安装多个

  4. 在根目录下,新建一个gulpfile.js(gulp文档里有一个模板,大概就是那个样子的,当然,我也给你准备了一个哦)

 // 获取 gulp
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename'); // 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
// 1. 找到文件
gulp.src('src/js/*.js')
//rename压缩后的文件名
.pipe(rename({suffix: '.min'}))
// 2. 压缩文件
.pipe(uglify({ mangle: false }))
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
}) gulp.task('default', ['script']);

  5.当packge.json和gulpfile.js准备好之后,你会发现,此时你的项目文件是这样的:

    

    除了上述我们提到的json、js和node_modules,你会发现还多了一个packge-lock.json

    不用担心,这是正常的,package-lock.json 是在  npm install 的时候生成的一份文件,主要目的就是用以记录当前状态下实际安装的各个npm package(插件)的具体来源和版本号,确保你每次安装的库包都与之前的一样

  6.恭喜你,走到了这里,说明你离成功只有一步之遥啦 而这最后一步就是运行gulp来压缩你的js啦

    gulp script 或者是直接执行 gulp

    注:当执行gulp defaultgulp将会调用default任务里的所有任务,如果想执行一个任务时,可以命令提示符执行gulp+任务名称,建议是一个一个任务执行

  7.走到这里,可以小确幸一下啦

    

    多出来的这个dist>js文件就是刚刚压缩完成的js啦

简单的把gulp的用法总结了一下,希望以后能用的到

  

  

  

gulp——用自动化构建工具增强你的工作流程的更多相关文章

  1. gulp前端自动化构建工具新手入门篇

    很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...

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

    博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 ...

  3. gulp前端自动化构建工具入门篇

    现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做 ...

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

    (1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...

  5. 【Node.js学习笔记】使用Gulp项目自动化构建工具

    刚接触node.js,对前端的一些东西还不是很清楚,据说Gulp这东西很强大,先来看看从网上抄的一段关于自动化构建的描述: 在为数众多的中小型软件作坊中,不存在自动化构建和发布工具.构建.交付准备环境 ...

  6. Gulp:自动化构建工具

    一.介绍: gulp是一个基于流的构建工具,可以自动执行指定的任务,简洁且高效 二.优点: 开发环境下,想要能够按模块组织代码,监听实时变化 css/js预编译,postcss等方案,浏览器前缀自动补 ...

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

    目录 1. gulp使用步骤 1.1 安装Node.js 1.2 全局安装gulp 1.3 安装项目依赖包gulp 1.3.1 了解package.json 1.3.2 根据package.json安 ...

  8. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  9. Gulp(自动化构建工具 )

    前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp ...

随机推荐

  1. 新版本SpringCloud sleuth整合zipkin

    SpringCloud Sleuth 简介 Spring Cloud Sleuth为Spring Cloud实现了分布式跟踪解决方案. Spring Cloud Sleuth借鉴了Dapper的术语. ...

  2. ThinkPHP 5.x远程命令执行漏洞复现

    ThinkPHP 5.x远程命令执行漏洞复现 一.漏洞描述 2018年12月10日,ThinkPHP官方发布了安全更新,其中修复了ThinkPHP5框架的一个高危漏洞: https://blog.th ...

  3. Matlab 图论最短路问题模型代码

    最短路问题的基本内容 最短路问题研究的是,在一个点与点之间连接形成的网络图中,对应路径赋予一定的权重(可以理解为两点之间的距离),计算任意两点之间如何和走,路径最短的问题.在这里的距离可以理解成各种两 ...

  4. [技术栈]CRC校验原理及C#代码实现CRC16、CRC32计算FCS校验码

    1.CRC.FCS是什么 CRC,全称Cyclic Redundancy Check,中文名称为循环冗余校验,是一种根据网络数据包或计算机文件等数据产生简短固定位数校验码的一种信道编码技术,主要用来检 ...

  5. 两种读取.xml文件的方法

    这里介绍两种读取配置文件(.xml)的方法:XmlDocument及Linq to xml 首先简单创建一个配置文件: <?xml version="1.0" encodin ...

  6. 动态insert mybatis与ibatis

    mybatis: <insert id="insert" parameterType="hashMap"> INSERT INTO item < ...

  7. Spring Boot认证:整合Jwt

    背景 Jwt全称是:json web token.它将用户信息加密到token里,服务器不保存任何用户信息.服务器通过使用保存的密钥验证token的正确性,只要正确即通过验证. 优点 简洁: 可以通过 ...

  8. C++常用库函数(1)

    Hello,疯狂的杰克由于大家见面了哦! 今天,给大家介绍一篇很有内涵的文章:C++常用库函数 1.缓冲区操作函数 函数名:memchr 函数原型:void  *memchr(const void * ...

  9. .NET Core 3.0 可卸载程序集原理简析

    因为最近在群里被问到如何理解 .NET Core 3.0 可卸载程序集,所以就写了这篇简单的分析. 因为时间实在很少,这篇文章只简单的罗列了相关的代码,请配合官方说明文档理解. 另外,书籍<.N ...

  10. 一个随意list引发的惨案(java到底是值传递还是引用 传递?)

    前两天写了一个递归,因为太年轻,把一个递归方法需要用到的list定义该递归方法外了,结果开始断点测试的时候有点小问题 ,然后上线之后因为数据量太多导致了一个java.util.ConcurrentMo ...