Gulp

时间 2020-11-30

标签 css html 前端 node git es6 npm json gulp 数组栏目 JavaScript 繁體版

原文原文链接

HTTP协议

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

报文

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

请求报文

请求方式css

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>

Gulp

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

Gulp的做用

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

Gulp的使用

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

使用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:项目所须要的依赖包node

开发依赖

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

package-lock.json文件的做用

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