我的gulp的初次尝试

最新推荐文章于 2024-06-12 09:48:30 发布

Edwin_

最新推荐文章于 2024-06-12 09:48:30 发布

阅读量660

点赞数

分类专栏： FrontEnd 文章标签： nodejs

本文链接：https://blog.csdn.net/Edwin_/article/details/78154745

版权

FrontEnd 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

首先，我的例子的基本目录结构如下图所示：

在页面index.html中会引用style1.css和style2.css中的样式，并且会调用script1.js和script2.js中的javascript脚本

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="assets/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div>
        <a href="xxx">hello world</a>
    </div>
    <img src="../others/bg.jpg"/>
    <script type="text/javascript" src="assets/main.js"></script>
</body>
</html>

script1.js

function SayHello(){
    alert("hello world");
}

script2.js

window.onload = function(){
    setTimeout(function() {
        SayHello();
    }, 2000);
}

style1.css

body{
    background-color: gray;
}

style2.css

img{
    border: 2px solid greenyellow;
}

接下来要做的就是将整个页面打包，压缩，并且MD5命名，防止缓存

首先电脑安装node.js

然后在当前目录下创建一个gulpfile.js

将控制命令行转到当前目录执行

npm init

进行环境初始化

此时会生成一个package.json

由于需要使用到

 
 gulp 

 
 gulp-uglify 

 
 gulp-minify-css 

 
 gulp-minify-html 

 
 gulp-concat 

 
 gulp-rev 

 
 gulp-rev-collector 

 
 run-sequence 

 
 gulp-replace 

 
 minimist 

所以需要先在全局和当前目录下安装

npm install -g gulp	// global install

npm install --save-dev gulp	// local install and save in package.json

全部安装完后的目录结构和package.json的内容如下

编写的gulpfile.js文件

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    minifyCss = require("gulp-minify-css"),
    minifyHtml = require("gulp-minify-html"),
    concat = require("gulp-concat"),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'),
    runSequence = require('run-sequence'),
    replace = require('gulp-replace'),
    minimist = require('minimist');

// minify css and MD5
gulp.task('minify-css', function () {
    return gulp.src('css/*.css')
        .pipe(concat('main.css'))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest('build/assets'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'));
});

// minify js and MD5
gulp.task('minify-js', function () {
    return gulp.src('js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('build/assets'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'));
});

// rename js and css in html from manifest file and minify html
gulp.task('minify-html', function () {
    return gulp.src(['rev/**/*.json', 'html/*.html'])
        .pipe(revCollector())
        .pipe(replace('xxx', url))
        .pipe(minifyHtml())
        .pipe(gulp.dest('build/'));
});

// copy other files
gulp.task('copy', function () {
    return gulp.src('others/*.*')
        .pipe(gulp.dest('build/assets'));
});

// run sequence
gulp.task('dev', function (done) {
    condition = false;
    runSequence(
        ['copy'], ['minify-js'], ['minify-css'], ['minify-html'],
        done);
});

// input parameter
var knownOptions = {
    string: 'env',
    default: {
        env: process.env.NODE_ENV || 0
    }
};

var url = 'https://www.baidu.com';
var options = minimist(process.argv.slice(2), knownOptions);
switch (options.env) {
    case '0':
        url = 'https://www.baidu.com';
        break;
    case '1':
        url = 'https://www.mi.com';
        break;
}

// start
console.log("The request url will be configured as " + url);
gulp.task('default', ['dev'], function () {

});

由于我想简化打包过程并且动态的更改index.html中的超链接地址，所以我再创建一个build.bat在根目录，以后只要双击这个build.bat就行，不用在执行gulp命令

@echo off
 call npm install --cache-min 999999999
 echo.Please input the follow number to config the url. (e.g. 1)
 echo.0. https://www.baidu.com
 echo.1. https://www.mi.com
 echo.
 set /p num=
 gulp --env %num%
pause

双击build.bat

此处选择1回车

可以看到生成了一个build文件夹，最终的打包结果就在build文件夹中

此时所有的css，js文件已经被压缩且被MD5命名了

此时打开index.html，也能发现里面的css和js引用的地方也都被更新了，且压缩了

<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width, initial-scale=1.0"><meta http-equiv=X-UA-Compatible content="ie=edge"><title>Document</title><link href=assets/main-a1cf48513f.css rel=stylesheet type=text/css></head><body><div><a href=https://www.mi.com>hello world</a></div><img src=../others/bg.jpg><script type=text/javascript src=assets/main-c4095a9679.js></script></body></html>

最终效果