day34 gulp

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
  • 安装:

  • 注意: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文件

1614244055203

2. 本地安装gulp(在项目目录下安装gulp)

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

  • 在本目录下cmd(命令行)执行: cnpm install gulp --save-dev
  • 安装完成后,就会在项目目录下产生一个node_modules文件

    1614244515297

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

1614247575610

复制后:

1614247610857

监听文件 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-dev
gulp.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');
// 压缩CSS
gulp.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

你可能感兴趣的:(node.js)