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'))
})