Gulp

作者: cj小牛 | 来源:发表于2020-02-02 16:50 被阅读0次

使用

1 .npm install gulp下载
2 . 在项目根目录下建立gulpfile.js文件
3 . 重构项目的文件夹结构src目录放置源代码的dist目录放置购置文件。
3 在gulpfile.js文件中编写任务

  1. 在命令行中执行gulp忍辱

gulp中的使用方法

  • gulp.src() 获取要处理的文件

  • gulp.dest() 输出文件

  • gulp.task() 建立gulp任务

  • gulp.watch() 监控文件的变化

           const gulp = require('gulp');
    // 使用gulp。task建立任务
    // 任务的名字,任务的回调函数
    gulp.task('first',(cb)=>{
    console.log('第一个任务');
    gulp.src('./src/css/base.css')
    .pipe(gulp.dest('./dist/css'));
    cb();
    });          
    

然后引入 npm install gulp-cli -g
然后在终端中 gulp fist (这个fist 就是任务的名字)

gulp 中的插件

gulp-htmlmin:html 压缩 npm install gulp-htmlmin
引入:cosnt htmlmin = require(‘gulp-htmlmin’);

gulp-csso:压缩css
gulp-babel:压缩javaScript
gulp-less:less 语法转换
gulp-uglify;压缩语法混淆javascript
gulp-file-include 公共文件包含
browersync 浏览器实时同步。

package.json 文件作用

描述文件,记录了当前项目的信息, npm int -y 生成。
第三方依赖

  1. dependercies 是项目的依赖,项目要依赖这个才能运行
  2. devDependendencies: 开发依赖,开发过程中使用的依赖。
    安装的时候 --save -dev 安装的就是开发依赖。
    区分的好处是不同的环境下可以下载不同的依赖。
    开发环境 npm intall 会下载所有依赖
    项目运行环境:npm install --production 会下载项目的依赖。
    模块和模块这件的依赖
    package-lock.json 文件的作用
  • 锁定版本,确保再次下载是不会应为版本产生问题。
  • 加快下载输出
模块查找方式一

require('/find.js')
require('/find')
1.require()方法更加模块路径查找模块,如果完整的路径,直接查找。

  1. 如果模块后缀省略,先找同名js文件再找同名的js文件夹
  2. 如果找到了同名文件夹,找文件夹中的index。js
  3. 如果文件夹中没用index。js就会去当前文件夹中的package.js 中找到main项目中的入口文件
    5.如果找到指定的入口文件或不存在或者没有指定的入口文件就会报错,模块没有找到

模块查找方式二

require('find')
1 .node.js 会假设它是系统模块
2 . Node.js 会 去node_modules文件夹中
3 .首先会看是否有该名字的JS文件
4 .看是否 有该名字的文件夹

  1. 如果是文件夹看里面是否有index.js
    6 如果没有index.js 查看该文件中的package.json 中的main选项中确定模块入口文件
    7 否则报错。
创建服务器

请求参数 req
req.url 请求的地址
req.method 请求的方式post 或get
res.end 请求完返回的内容。
req.headers 获取报文信息。

    const http = require('http');
  let app=http.createServer();
  app.on('request',(req,res)=>{
   
    console.log(req);
    res.end('<h2>111111</h2>');
});
app.listen(3000);
console.log('服务器启动成功');

在终端启动服务器

服务器访问
http://localhost:3000/
http 状态码 200 成功 404 请求没有找到 500 服务器问题 400 客户端请求问题。
返回的内容类型
res.writeHead(状态码,{
‘content-type’:'text/plain;charset='utft8' //内容的格式。编码。
});
1 . text/html
2 . tet/css
3 application/javascript
4 image/jpeg
5 application/json

请求参数

1 GET参数
请求参数直接拼接在url 上
req.url() 可以获取道参数。
const url = require('url');

url.parse(req.url,true)
let parms = url.parse(req.url,true).query;这样可以解析出对象方式的请求参数。
2 post
请求参数在请求报文中。
post 参数是通过事件的方式接受的
data 当请求参数传递的时候发出data事件
end 上请求删除传递完成的时候出发的
let postParmas ='';
req.on('data',parms=>{
postParmas+=parms;拼接参数字符串。
})
req.on('end,()=>{ //参数传输完成。
quersting.parse(postParms) 通过处理参数模块装成对象。
})
const querystring = require('qurystring')// 处理请求参数模块

路由

路由指的是客户端请求地址与服务器程序代码的对应关系,简单的说就是,请求啥相应啥。

异步函数
 async function fn(){
//抛出错误后会停止i
throw '发生了一些错误';
return 123; 

};

// console.log(fn());
fn().then(function(data){

console.log(data);
}).catch(function(ero){
// 在这得到错误。
console.log(ero)
})

await 关键字。

async function fn(){
//抛出错误后会停止i
throw '发生了一些错误';
return 123; 

};

  // console.log(fn());
  fn().then(function(data){

      console.log(data);
  }).catch(function(ero){
// 在这得到错误。
console.log(ero)
  })

相关文章

  • gulp

    gulp gulp.src gulp.dest gulp.task gulp.watch gulp.pipe() ...

  • gulp自动化项目构建

    var gulp = require('gulp');//引用gulp var $ = require('gulp...

  • gulp压缩合并文件

    gulp压缩合并文件流程 //引入gulp和gulp插件var gulp = require('gulp');va...

  • Gulp 使用方法(教程一)

    Gulp 官网 目录 Gulp 环境 Gulp 环境 初始化目录结构 安装 gulp gulp 的简单使用 使用 ...

  • gulp讲解

    一、gulp的四个主要的API gulp.src、gulp.pipe、gulp.dest、gulp.watch 二...

  • JS: gulp.js

    var gulp = require('gulp'), minify = require('gulp-minify...

  • gulp的简单使用

    gulp使用流程:安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gu...

  • gupl 的基本压缩

    // 获取 gulp var gulp = require('gulp'); // 获取 uglify 模块(用于...

  • gulp+webpack+experss

    var gulp = require('gulp'); var gls = require('gulp-live-...

  • gulp与webpack的区别

    gulp webpack 相同功能: 功能 gulp webpack gulp.task('sass'...

网友评论

      本文标题:Gulp

      本文链接:https://www.haomeiwen.com/subject/jjfqxhtx.html