day34 gulp

1. Gulp简介

  • gulp是前端开发过程中对代码进行构建的工具，是自动化我的项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多反复的工作可能应用正确的工具主动实现；应用她，咱们不仅能够很欢快的编写代码，而且大大提高咱们的工作效率。
  • gulp是基于Nodejs的主动工作运行器，她能自动化地实现 javascript/coffee/sass/less/html/image/css 等文件的的测试、查看、合并、压缩、格式化、浏览器主动刷新、部署文件生成，并监听文件在改变后反复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思维，前一级的输入，间接变成后一级的输出，使得在操作上非常简单。
  • gulp 和grunt 十分相似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地实现构建工作。

2. Gulp环境搭建

1）装置nodeJs

  • 阐明：gulp是基于nodejs，天经地义须要装置nodejs
  • 装置：关上nodejs官网（https://nodejs.org/en/），点击硕大的绿色Download按钮，它会依据零碎信息抉择对应版本（.msi文件）
  • 测试：按window + r 输出cmd回车，而后输出npm -v
  • 确保曾经配置到了环境变量， 这样你就能够在全局范畴内去应用它了
  • 如果想理解环境变量：进入以下地址：https://blog.csdn.net/jiang77...

  • npm的解释：

    • npm是Node.js的包管理工具（package manager）
    • 在Node.js上开发时，会用到很多他人写的JavaScript代码。如果须要应用他人写的某个包，每次都依据名称搜寻一下官方网站，下载代码，解压，再应用，十分繁琐。于是一个集中管理的工具应运而生：大家都把本人开发的模块打包后放到npm官网上，如果要应用，间接通过npm装置就能够间接用，不必管代码存在哪，应该从哪下载。
    • 更重要的是，如果咱们要应用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm能够依据依赖关系，把所有依赖的包都下载下来并治理起来。否则，靠咱们本人手动治理，必定既麻烦又容易出错。

2）装置 cnpm

  • 因为npm装置插件是从国外服务器下载，受网络影响大，可能出现异常;
  • 如果npm的服务器在中国就好了，所以咱们乐于分享的淘宝团队干了这事。网址：http://npm.taobao.org

  • 装置：

    • cmd(命令行) 执行：

      • npm install cnpm -g --registry=https://registry.npm.taobao.org
      • cnpm -v 测试是否装置胜利
  • 留神：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）

3) 全局装置gulp

  • cmd命令： cnpm install gulp -g
  • gulp -v， 呈现版本号即为正确装置
  • 全局装置gulp的目标是：能够应用gulp命令（就跟应用npm的命令一样）

4) gulp在我的项目中如何应用 （新我的项目的步骤）

1. 新建package.json配置文件(初始化一个我的项目)

  • cmd命令： cnpm init
  • 一路回车，就会在我的项目的文件夹下产生一个package.json文件

2. 本地装置gulp(在我的项目目录下装置gulp)

此步骤的目标是：把gulp里的所有的js文件从服务器上下载到我的项目目录下;

  • 在本目录下cmd(命令行)执行： cnpm install gulp --save-dev
  • 装置实现后，就会在我的项目目录下产生一个node_modules文件

3. 应用gulp

在我的项目根目录下创立 gulpfile.js

  • 在这个js文件中写上js代码，就能够应用。
  • gulp.task("工作名称",回调函数);

  • gulp.src("源文件门路");

    • gulp.src() 是读取将要解决的文件，即源文件

  • gulp.dest("目标门路");

    • gulp.dest() 是解决后的文件的门路，即目标文件

  • pipe(操作);

    • pipe() 管道，是如何解决该文件（如：sass编译，复制文件，压缩文件等）
  • 原生的gulp有：task src dest watch

原生gulp (4个)

复制文件
const gulp = require("gulp");// gulp原生办法// gulp.task("工作名称",回调函数)gulp.task("_copy",function(){    gulp.src("2fs.txt").pipe(gulp.dest("d:/dest"));});// cmd命令行: gulp 工作名, 如gulp _copy

后果：d:/dest下有了2fs.txt文件，阐明复制胜利了。

批量操作：

//目录js下的所有目录// 留神该办法只会赋值js文件夹下的所有文件和文件夹,自身的js文件夹没有赋值gulp.src("js/**/*").pipe(gulp.dest("d:/dest"));//把我的项目目录下的所有文件都进行拷贝 （包含子文件夹，不论有多少级）//留神：该办法依然不会复制该我的项目文件夹，只会复制我的项目下的文件和文件夹gulp.src("./**/*").pipe(gulp.dest("d:/dest"));

我的项目：day34

复制后：

监听文件 watch
gulp.watch("监听的文件",回调函数);
gulp.task("_watch",function(){    gulp.watch("2fs.txt",function(){        gulp.src("2fs.txt").pipe(gulp.dest("d:/dest"));    });});

本地装置gulp插件

  • npm install moduleName

    • 装置模块到我的项目目录下

  • npm install -g moduleName

    • g 的意思是将模块装置到全局，具体装置到磁盘哪个地位，要看 npm config prefix 的地位。

  • npm install -save moduleName

    • -save 的意思是将模块装置到我的项目目录下，并在package文件的dependencies节点写入依赖。

  • npm install -save-dev moduleName

    • -save-dev 的意思是将模块装置到我的项目目录下，并在package文件的devDependencies节点写入依赖。

gulp自身只做一些文件的拷贝，监督等等，然而它提供了很多的接口，由插件实现更多对应的工作，如：js文件的编译，合并文件，压缩文件，优化图片的尺寸，创立本地的开发服务器。上面先介绍罕用的，更多的能够找gulp的插件。

合并文件

cmd命令： cnpm install gulp-concat --save-dev

const gulp_concat = require('gulp-concat');gulp.task("_concat",function(){gulp.src(["js/a.js","js/b.js"]).pipe(gulp_concat("tools.js")).pipe(gulp.dest("d:/dest"));});
压缩文件

cmd命令：cnpm install gulp-uglify --save-dev

const gulp_uglify = require('gulp-uglify');gulp.task("_ugly",function(){    gulp.src("tools.js").pipe(gulp_uglify()).pipe(gulp.dest("d:/dest"));});
压缩图片

cmd 命令： cnpm install gulp-imagemin --save-dev

const gulp_imgmin = require('gulp-imagemin');// 压缩图片 cnpm install gulp-imagemin --save-devgulp.task("_imgMin",function(){    gulp.src("img/**/*").pipe(gulp_imgmin()).pipe(gulp.dest("d:/dest"));});
压缩css

cmd命令：cnpm install gulp-minify-css --save-dev

const gulp_minCss = require('gulp-minify-css');// 压缩CSSgulp.task("_minCss",function(){    gulp.src("css/test.css").pipe(gulp_minCss()).pipe(gulp.dest("d:/dest"));});
重命名

cmd命令：cnpm install gulp-rename --save-dev

const gulp_rename = require('gulp-rename');//合并 压缩 重命名 拷贝gulp.task("_rename",function(){    gulp.src(["js/a.js","js/b.js"]).pipe(gulp_concat("tools.js")).pipe(gulp_uglify()).pipe(gulp_rename("tools.min.js")).pipe(gulp.dest("d:/dest"));});
ES6转ES5

cnpm install --save-dev babel-preset-es2015

cnpm install --save-dev gulp-babel@7 babel-core babel-preset-env

const gulp_babel = require('gulp-babel');gulp.task("_babel",function(){    gulp.src("MF.js").pipe(gulp_babel({presets: ['es2015']})).pipe(gulp.dest("d:/dest"));});

正在进行的我的项目如何用gulp:

  1. 新建空文件夹作为我的项目的文件夹（不要用gulp作为我的项目文件夹）
  2. 用npm初始化我的项目：用npm ini命令产生package.json文件（第五步）
  3. 本地装置gulp
  4. 把我的项目目前的所有文件拷贝的到新建的我的项目文件夹里
  5. 在我的项目根目录下写gulpfile.js的代码

简化版：

应用步骤
1.下载全局gulp命令 cnpm install gulp -g
2.cnpm init 创立配置文件
3.下载gulp 模块 cnpm install gulp --save-dev
4.在我的项目根目录下创立 gulpfile.js