GULP

在我才接触gulp的时候 看他就是一个 通过压缩各种文件来提升用户体验的开发工具   那是因为  对他的理解并不深    他真正强大 之处 在于他的     管子  .pipe()  可以 链式调用 无数个  厉害的插件

  流的概念  我还不太理解  待我再仔细学习  node.js 后再说  现在  就不在这里 误导别人了

下面详细的来说一说gulp关于压缩文件的插件

  压缩各种 类型文件 的操作其实差不多 都是要先 引入 gulp包   再引入 对应要压缩文件类型的 npm包

那么在文件夹里gitbash 输入如下

$ npm init -y //生成 package.json
$ npm i -g gulp  //这样 就可以全局 使用 gulp 命令
$ npm i -D gulp  //下载至 node_module 因为gulp只是开发的时候会用到,所以 -D (--save--dev)

  

  如果 安装成功可以  gulp -v   看下版本号   能看你就成功了     这个npm 不太好安装   你可以 使用淘宝镜像 来安装

  安装淘宝镜像   安装成功之后  把 所有的npm操作 换成 cnpm   会比之前快很多的

npm install cnpm -g --registry=https://registry.npm.taobao.org 

  package.json 里默认的入口 main是  gulpfile.js   我们就新建一个 gulpfile.js 文件 (你想改main也没人拦你)

    下面来干正事

压缩js  

 gulpfile.js

var gulp = require('gulp');  //请求gulp
var uglify = require('gulp-uglify');  //压缩js的方法ualify(丑笔?) gulp.task('script',function(){
gulp.src('./*.js')  //读取文件
.pipe(uglify())    //压缩js文件(变丑吧少年!)
.pipe(gulp.dest('./dist/js'))  //导出到 dist 下的js 文件夹下
})

在当前目录下 新建 test.js 你随便写点代码  别出错就好

这时在gitbash中

$ npm i -D gulp-uglify   //安装需要的包
$ gulp script

就可以看见

  新生成了一个 dist文件夹  里面的js  文件夹里面 也有一个 test.js   这个就是压缩后的js

  使用命令行之后 经常会遇到  一类错误

  

  这类错误  很容易解决  就是  缺什么 module  下什么 module

  npm i ***  即可      下面  所有require 引入的模块 都要 npm 安装的  下面 包类似的错误也是这么解决哦

  

我们来分析一下  上面这个栗子的成分

1.引入 gulp

2.引入要压缩文件 需要的  包  (gulp-uglify)

3.gulp任务 (gulp.task)  可以有多个任务哦 就是同时压缩好几种类型的文件

    注意:下面这三个 链式调用的

  1)gulp.src()  要从哪里找文件    ./  相对路径  ,  *.js  任何以.js 结尾的文件

  2)pipe()  管子  。干吗用的呢? 我也不知道  我感觉就是固定的格式   他要管道给他就好

      在这里面    的是  真正 发挥作用 的    uglify  他把文件压缩的

  3)pipe() 管子不能停  。。。   (想进行更多的操作  可以 一直  .pipe下去)

      在这里  gulp.dest()  压缩完 的东西 放到哪里

我们再来压缩一个 css

gulpfile.js

var gulp = require('gulp');    //这个请求过一次就不需要在请求了

var minifycss = require('gulp-minify-css');  //新的变数
gulp.task('css',function(){
gulp.src('./*.css')
.pipe(minifycss())              //这里变了一下
.pipe(gulp.dest('./dist/css'))
})

在当前文件夹下 新建一个  css 文件   随便写点

这时我们 在gitbash 输入 gulp css   就可以在 dist 下的 css 里面生成  压缩后的文件

切! 这玩应好简单   就是压缩一个就要敲一次命令行有点麻烦了

当然有简单的方法

    watch  持续监听

    default  设置过之后 你只需要 在命令行敲4个字母   gulp 就行了

在上面的代码的几乎上   还是 gulpfile.js

gulp.task('auto', function() {
gulp.watch('js/**/*.js', ['script']);  //watch('src',['name'])
gulp.watch('css/**/*.css',['css']);
})
gulp.task('default',['script','css', 'auto'])

 gulp.watch('src',['name'])  监听的文件   ,     任务的名字  task

 gulp.default('default',['name'],['name'])  default(默认的)    ,   任务的名字

 都是这个套路啊

No   大部分都是这样的   就是中间那个管道 里面懂东西需要 改一下      附上神表

压缩的文件类型 中间管的内容
js gulp-uglify()
css gulp-minify-css
图片 gulp-imagemin({progressive:true})
less/sass gulp-less()/gulp-sass()

如果 你跟这 我这个小白打了打  而且  你很善于发现问题   你会发现  在压缩js 的时候 如果js文件里面有  es6的语法    会报错

  其实 也好解决    在   压缩  js 的中间管之前  添加  一个 转化  es6 到 es5 的  包即可  babel

  

//压缩有ES6 的 js
gulp.task('script',function(){
gulp.src('js/**/*.js') //找到下面所有的 js
.pipe(babel()) //处理es6
.pipe(uglify()) //管道
.pipe(gulp.dest('dist/js'));
})

再在当前目录下  新建一个   .bablrc  的文件   注意  前面有一个点

  文件里面写上下面的代码即可

{
"presets":["env"]
}

其他插件总结

模块名称 模块.pipe() 模块的作用
删除模块       del .pipe(del) 删除已有内容
格式检查模块 gulp-jsgint .pipe(gulp-jshint).pipe(gulp-jshint.repoter('default')) 检查代码格式错误 便于调试
文件合并模块 gulp-concat .pipe(concat(newname.css)) 把多个文件合并成一个文件
重命名模块  gulp-rename .pipe(gulp-rename(newname.js)) 重命名文件
错误抑制模块 gulp-plumber .pipe(gulp-plumber) 即使报错 gulp 仍然处于挂起状态

     还有 copy 模块  其实  就是  gulp.src  获取过来 然后    .pipe(gulp.dest())  导出去    就相当于 copy了

      还有  gulp-livereload 据说是 实时更新   我按照 npm 网站上的教程打了一下   没成功

    他说 他升级了 不再 自动监听了      需要  设置  livereload({start:true})   然而 他得 实例代码 并没有这么设置  我自己试了几下   就算了吧  感觉 用 watch 监听就够了

  就啰嗦到这里了     感谢各位大爷  来观看   大爷吃好喝好  记得常来啊~~~~

  

gulp基于node流的自动化构建工具的更多相关文章

  1. Gulp:基于流的自动化构建工具

    前言 先说说为什么会使用gulp. 当你沉醉于撸代码之时,是否想过正规的前端代码需要走哪些流程,复杂的不说了,有几点想必你也思考过,比如: 1.代码的压缩合并.图片压缩怎么搞: 2.代码校验,是否规范 ...

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

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

  3. gulp:更简单的自动化构建工具

    目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp.为什么使用gulp?因为Gulp更简单.Grunt任务拥有大量的配置,会引用大量你实际上并不需要的对象属性,但是Gulp里 ...

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

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

  5. JavaScript自动化构建工具入门----grunt、gulp、webpack

    蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动  自动化时代的程序员: 希望一切都可以自动完成  ...

  6. JavaScript自动化构建工具grunt、gulp、webpack介绍

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

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

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

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

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

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

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

随机推荐

  1. iWeb峰会(HTML5峰会)2015年7月19日上海站会后感想

         上周日专门从南京跑到上海參加了iWeb峰会(HTML5峰会),感觉这一天去的挺值的.几个演讲都挺精彩,干货不少啊.       总体感觉随着2014年HTML5标准的终于定稿,最近HTML5 ...

  2. 有关JS控制时间的几个小Demo

    一.Document自带的定时和延时方法:  循环运行:var timeid = window.setInterval("方法名或方法"."延时");windo ...

  3. 后台返回json可能会出现的异常解析:java.lang.IllegalStateException: WRITER

    在使用filter做权限管理限制访问时,经常是在数据可以正确返回时,在后台日志中却有这个异常抛出,这个现象让人不禁想去一探究竟. 我要做的是在一个filter中拦截所有的请求,并且根据拿到的请求中的参 ...

  4. On-Heap与Off-Heap

    和C#里的托管代码.非托管代码类似

  5. git入门(msysgit安装)

    1.下载git-for-windows 常用的GitHub客户端msysgit,也就是git-for-windows. 登录官网 https://git-for-windows.github.io/, ...

  6. 简述ES6其他的东西

    第一是修饰器是ES7的一个提案,现在Babel转码器已经支持.那么什么是修饰器呢,修饰器是对类的行为的改变,在代码编译时发生的,而不是在运行时发生的且修饰器只能用于类和类的方法.修饰器可以接受三个函数 ...

  7. 无 new 构造与链式调用

    无 new 构造 最简单的想法 (function(window) { var jQuery = function() { return new _jQuery(); }; var _jQuery = ...

  8. go defer (go延迟函数)

    go defer (go延迟函数) Go语言的defer算是一个语言的新特性,至少对比当今主流编程语言如此.根据GO LANGUAGE SPEC的说法: A "defer" sta ...

  9. 598. Range Addition II

    Given an m * n matrixMinitialized with all0's and several update operations. Operations are represen ...

  10. 2018年的UX设计师薪酬预测,你能拿多少?

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具.   一个经验丰富的设计师完全可以根据地区和专业来可以预期薪酬之间的差距,其中悬殊最高可达80K. 本 ...