认识node.js

node.js给大家提供了非常庞大的模块库（插件库/包库）

  1. 内置模块（安装nodejs就可以用）
  2. 第三方的库 axios（阿里出的一套库）

  3. 自定义模块（自己实现的内容）

    node加空格加-v查询当前版本还有是否安装好，gulp -v代表查询gulp版本

    内置模块

  • 查阅 http://nodejs.cn/api/
  • 找到我们使用的方法抄代码
  • 引入必须遵从commonJS规范。引入这个模块的一种新的写法。类似ES6 import

  • 运行.js文件

    1.  a. 进入这个目录<br />              cd 路径  （windows电脑的同学分盘，先切换分区） D: + enter<br />            【注】按tab键自动补齐<br />  先进行分盘，分完盘之后cd加空格把文件拖到这就好，cd加空格加..返回上一级目录<br />          b. node 文件.js
    1. //遵从commonJS规范
    2. //根据网址规范去写
    3. const os = require("os");
    4. console.log(os.homedir());//方法
    5. console.log(os.hostname());

    QQ图片20200814203435.png

    第三方模块

    a. 初始化当前文件夹
    npm init 一路敲回车
    生成一个package.json 就ok 了

    b. 找到你要使用插件
    https://www.npmjs.com/
    c. 下载插件 npm的服务器在美国
    改变下载的源路径 cnpm（阿里淘宝服务镜像）
    https://developer.aliyun.com/mirror/NPM?from=tnpm
    初始完填写npm install -g cnpm —registry=https://registry.npm.taobao.org
    d. 拷贝到你的控制上，复制 + 回车
    e. 接下来的命令，由于我们使用了cnpm安装，接下来我们可以将
    所有npm命令换成cnpm（老有问题）

    1. 下载插件
      cnpm install request —save-dev (—save 保存到本地 -dev 将下载信息保存在package.json里)
      cnpm i require -D
      2. 多了一个node_modules文件夹（这个文件夹存放所有的下载下来的第三方模块）
      3. 通过commonJS规范引入插件，使用a
      4.如果你想删除node_modules目录 可以使用命令
      rm -rf node_modules/
      删除以后，我们可以使用package.json中之前设置好的依赖继续进行安装
      npm install (就不需要输入后面的那些命令了)
      这样我们就建好了一个项目 ```javascript const request = require(“request”);

request({ url: “https://api.asilu.com/weather/?city=%E9%9D%92%E5%B2%9B“, json: true }, (error, response, body) => { console.log(body); })

  1. <a name="3Zk8e"></a>
  2. ### 自定义模块
  3. ```javascript
  4. function show(){
  5.   console.log("hello world");
  6. }
  8. function show2(){
  9.   console.log("world, hello");
  10. }
  11. module.exports = {
  12.   show,
  13.   show2
  14. }
  1. //遵从commonJS
  2. /*
  3.   require("demo")如果不加./的话
  4.   1、先去内置模块中查找demo是否存在
  5.   2、然后再去node_modules去找
  6.   3、再从自定义模块去找
  8.   【注】后缀.js都可以省略。
  9. */
  12. const demo = require("./demo");
  13. demo.show();
  14. demo.show2();

认识gulp

Gulp是一个前端自动化构建工具，基于流的的构建系统，主要优点是速度，效率和简化

1.gulp优点:

  1. 1. 易于使用
  2. 2. 构建快速
  3. 3. 插件高质
  4. 4. 易于学习

版本问题

  • Gulp 4.0.2 必须使用 nodejs 12以上版本
  • Gulp 3.9.1 必须使用 nodejs 12以下版本

  • 10.16.3

    1. 14系列<br />      最好自行查阅资料安装一个nvm。 nvm 是nodejs的一个版本控制工具。

    gulp的安装

  1. 先进行 npm init初始化
  2. 输入npm install -g cnpm —registry=https://registry.npm.taobao.org
  3. 再输入cnmp init初始化

  4. 现在我们可以使用 package.json 进行gulp的配置，如果要使用gulp 需要在工程目录下重新安装gulp，使用命令 cnpm install gulp —save-dev

    1. cnpm i gulp -D<br />        --save-dev 将gulp安装的信息保存packpage.json

  5. 查看检查版本型号降低版本型号cnmp：cnmp i gulp@3.9.1 -D

cnp：cnp i -g gulp@3.9.1

  1. 如果删除了node_modules可以用cnpm install重新加载出来

    使用gulp创建任务

  • 使用gulp创建任务 gulpfile.js 这个js文件是我们gulp非常重要的配置文件，配置完这个文件 我们就可以使用gulp了
    1. const gulp = require("gulp");
    2. gulp.task("hello", function(){
    3.   console.log("你好呀");
    4. });

    gulp介绍大全

    ```javascript const gulp = require(“gulp”); // 第一个gulp任务 / 第一个参数是任务的名字 第二个参数是 回调函数 / gulp.task(“hello”, function(){ console.log(“你好呀”); }); //运行任务 控制台 gulp 任务名

//gulp基本任务，可以帮助我们完成gulp的基本的文件操作 //gulp.src gulp的源路径 gulp.dest gulp目的路径 pipe() 管道 //1、拷贝html代码 const htmlmin = require(‘gulp-htmlmin’); gulp.task(‘copy-html’, function(){ return gulp.src(‘index.html’) .pipe(htmlmin({ collapseWhitespace: true}))//压缩好的 //html文档 .pipe(gulp.dest(‘dist/‘)) .pipe(connect.reload()); }); //拷贝图片 gulp.task(‘images’, function(){ // return gulp.src(‘images/.{jpg,png}’)//只拷贝当前文件夹下的图片 // .pipe(gulp.dest(‘dist/images’));//如果当前文件夹里有文件夹存放着图片则拷贝不了 // return gulp.src(‘images//‘)//只能拷贝当前文件夹里面的文件夹，图片拷贝不了 // .pipe(gulp.dest(‘dist/images’)); return gulp.src(‘images/**/‘)//文件夹里面的内容全部拷贝 .pipe(gulp.dest(‘dist/images’)) .pipe(connect.reload()); }) // 多个文件拷贝到一个目录下 gulp.task(‘data’, function(){ return gulp.src([‘xml/.xml’, ‘json/.json’, ‘!xml/1.xml’]) .pipe(gulp.dest(‘dist/data’)) .pipe(connect.reload());

}) // xxx.css 未压缩版 // xxx.min.css 压缩(去除所有的空格和换行) 上线版本 //gulp-minify-css gulp-rename const scss =require(‘gulp-sass’); const minifycss = require(‘gulp-minify-css’); const rename = require(‘gulp-rename’); gulp.task(‘scss’, function(){ return gulp.src(‘scss/index.scss’) .pipe(scss())//把scss文件转为css文件 .pipe(gulp.dest(‘dist/css’)) .pipe(minifycss())//压缩文件 .pipe(rename(‘index.min.css’))//重命名，每一个scss文件，都要重新编写一个文件命名 .pipe(gulp.dest(‘dist/css’)) .pipe(connect.reload()); }); /* gulp-concat 合并文件 gulp-uglify 压缩js代码（【注】如果大家用了其他的框架编写代码，就不要压缩） 会去编写ES6语法 2015 通过插件将ES6语法转成ES5语法

gulp-babel @babel/core npm install babel-preset-es2015 —save-dev / const concat = require(‘gulp-concat’); const uglify = require(‘gulp-uglify’); const babel = require(‘gulp-babel’) gulp.task(‘scripts’, function(){ return gulp.src([‘javascript/.js’]) .pipe( babel({ presets: [“es2015”], }) ) .pipe(concat(‘index.js’)) .pipe(gulp.dest(‘dist/js’)) .pipe(uglify()) .pipe(rename(‘index.min.js’)) .pipe(gulp.dest(‘dist/js’)) .pipe(connect.reload()); }) / 注意： 出现问题先去查看版本问题（版本过高容易出现问题） 出现问题的语句有道笔记翻译，再去百度 例子：Couldn’t find preset “es2015” relative to directory 解决方案：npm install babel-preset-es2015 —save-dev 有时候控制台也会给出答案，比如说缺少插件 /

// 一次性执行多个任务 gulp.task(‘build’, [‘copy-html’, ‘images’, ‘data’, ‘scss’, ‘scripts’],function(){ console.log(‘项目建立成功’); }) // 监听 gulp.task(‘watch’,function(){ / 第一个参数 监听的文件路径 第二个参数 监听到文件发生变化以后执行的任务 必须是数组 / gulp.watch(“index.html”, [“copy-html”]); gulp.watch(“images/*/“, [‘images’]); gulp.watch([“xml/.xml”, “json/.json”, “!xml/1.xml”], [‘data’]); gulp.watch(“scss/index.scss”, [‘scss’]); gulp.watch([“javascript/*.js”], [‘scripts’]); }) const connect = require(“gulp-connect”); gulp.task(“server”, function(){ connect.server({ root: “dist”,//设置根目录 port: 8888,//端口号 livereload: true //实时刷新 }) }) //设置一个默认任务 //同时启动监听和服务器 gulp.task(“default”, [“watch”, “server”]);

```