Gulp

HTTP协议

HTTP:超文本传输协议，客户端向服务端请求数据，服务端向客户端响应数据。

报文

http请求和响应的过程中传递的数据块便叫做报文

请求报文

请求方式

GET:请求数据
POST：发送数据

//引进http协议
const http = require('http');
//app对象就是网站服务器对象
const app = http.createServer();

//请求数据  req:请求  res:响应
app.on('request', (req, res) => {
    console.log(req.method);
    if (req.method = 'GET') {

        res.end('get请求')
    } else if (req.method = 'POST') {
        res.end('post请求')
    }

})

//监听端口
app.listen(3000);
console.log('服务器启动成功');

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form method="post" action="http://localhost:3000">
        <input type="submit" value="按钮">
    </form>
</body>

</html>

基于node平台开发的前端构建工具，将机械化操作编写成任务，想要执行机械化操作只需要输入命令即可，用机器执行手工，提高开发效率

Gulp的作用

项目上线 HTML CSS JS文件压缩合并
语法转换（es6,less等等）
公共文件抽离
修改文件浏览器自动刷新

Gulp的使用

命令行工具：npm install gulp-cli -g

使用npm install gulp下载gulp库文件
在项目根目录下建立gulpfile.js文件
重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
在gulpfile.js文件中编写任务.
在命令行工具中执行gulp任务

Gulp中提供的方法

gulp.src()：获取任务要处理的文件
gulp.dest()：输出文件
gulp.task()：建立gulp任务
gulp.watch()：监控文件的变化

// 引进gulp模块
const gulp = require('gulp');

// 建立gulp任务
gulp.task('first', () => {
    //获取要处理的文件
    gulp.src('./src/1.hello word.js')
        // 将处理好的任务输出到dist目录
        .pipe(gulp.dest('./dist'))

})

Gulp插件

gulp-htmlmin ：html文件压缩          npm install gulp-htmlmin
gulp-csso ：压缩css                  npm install gulp-csso
gulp-babel ：JavaScript语法转化      npm install  gulp-babel @babel/core @babel/preset-env
gulp-less: less语法转化              npm install gulp-less  
gulp-uglify ：压缩混淆JavaScript     npm install  gulp-uglify
gulp-file-include 公共文件包含       npm install gulp-file-include
browsersync 浏览器实时同步


//引进gulp模块
const gulp = require('gulp');
//引进gulp-htmlmin插件
const htmlmin = require('gulp-htmlmin')
    //引进gulp-file.include插件
const include = require('gulp-file-include');
//引进gulp-less插件
const less = require('gulp-less');

//引进gulp-csso文件
const csso = require('gulp-csso');
//引进gulp-uglify插件
var uglify = require('gulp-uglify');
//引进gulp-babel插件
const babel = require('gulp-babel');




//建立gulp任务
//1.第一个参数为任务的名字  第二个参数为任务的回调函数
gulp.task('first', () => {
    console.log('gulp任务');
    // 获取要处理任务的路径
    gulp.src('./src/css/normalize.css')
        //将结果输出到指定的dest目录
        .pipe(gulp.dest('./dist/css'))
})


// 建立html任务     1.抽取html文件的公共部分  2. 压缩html文件
gulp.task('htmlmin', () => {

    gulp.src('./src/*.html')
        //抽取文件的公共部分
        .pipe(include())
        // 压缩html文件
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'));

})


//建立css任务       1.将less文件转换成css文件  将css文件进行压缩
gulp.task('cssmin', () => {

    //获取要处理任务的路径 多个文件可以用数组表示
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        //语法转换 将less文件转换成css文件
        .pipe(less())
        //进行css文件压缩
        .pipe(csso())
        //将输出的结果输出到dist目录下的css目录
        .pipe(gulp.dest('./dist/css'))

})



//建立js任务         1.ES6语法转换  2.代码转换
gulp.task('jsmin', () => {
    // 获取要处理任务的路径
    gulp.src('./src/js/*.js')

    //将es6的代码进行转换
    .pipe(babel({
            presets: ['@babel/env']
        }))
        //将js的代码进行压缩
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
})

gulp.task('copy', () => {
    console.log('gulp任务');
    // 获取要处理任务的路径
    gulp.src('./src/css/normalize.css')
        //将结果输出到指定的dest目录
        .pipe(gulp.dest('./dist/css'))
})

package.json文件的作用

项目描述文件，记录当前项目信息，例如项目名称，版本，作用，地址，githup地址，当前项目所依赖哪些第三方模块等，使用npm init -y命令生成

name：项目的名字
version:版本信息
description:项目的描述
main:项目的主文件
scripts:命令的别名
author:项目的著作
license:项目的协议

gulp依赖

依赖：项目依赖文件依赖

项目依赖

在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖
使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中

注意：npm install --production:项目所需要的依赖包

开发依赖

在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖
使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中

package-lock.json文件的作用

锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作

Gulp

HTTP协议

报文

请求报文

Gulp

Gulp的作用

Gulp的使用

Gulp中提供的方法

Gulp插件

package.json文件的作用

gulp依赖

项目依赖

开发依赖

package-lock.json文件的作用

已注销

引用和评论

Vue