gulp安装配置,压缩js,css,替换html中的引用

Ubuntu下, Gulp.js的安装

安装 gulp 需要先有node环境, 再使用 node 中的 npm 工具安装 gulp 工具

# 添加apt源
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -

# 执行安装
sudo apt-get install  nodejs

# 安装gulp-cli
sudo npm install --global gulp-cli

# 更换gulp插件源为淘宝源
npm config set registry https://registry.npm.taobao.org

# 配置后可通过下面方式来验证是否成功
npm config get registry

安装完成后检查一下版本, 我的版本如下

$ node -v
v16.14.1

$ npm -v
8.5.0

$ gulp -v
CLI version: 2.3.0
Local version: 4.0.2

安装gulp插件

# 下面的命令要在项目目录下执行, 安装必要插件
npm install --save-dev gulp
npm install --save-dev gulp-babel
npm install --save-dev babel-preset-env
npm install --save-dev babel-core
npm install --save-dev gulp-uglify
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev jshint gulp-jshint
npm install --save-dev clean-css
npm install --save-dev gulp-rev-dxb
npm install --save gulp-rev-collector-dxb
npm install --save-dev gulp-clean-css

安装完成后, 在项目目录下建立一个 gulpfile.js 文件, 其中的 g 可大写可小写. 如下是我编写的文件

const {series, src, dest} = require('gulp');
const babel             = require('gulp-babel');
const uglify            = require('gulp-uglify');
const rev               = require('gulp-rev-dxb');
const revCollector      = require('gulp-rev-collector-dxb');
const clean             = require('gulp-clean');
const jsLint            = require('gulp-jshint');
const cleanCss          = require('gulp-clean-css');


/** js代码位置 */
let js_src      = ['web/js/src/**/*.js'];
let js_dest     = 'web/js/dest';

/** css代码位置 */
let css_src     = ['web/css/src/**/*.css'];
let css_dest    = ['web/css/dest'];

/** html代码位置 */
let html_replace_src    = 'views/**/*.php';
let html_replace_dest   = 'views';
let js_replace_src      = 'web/js/dest/*.js';
let js_replace_dest     = 'web/js/dest';



/* --------------- 压缩打包CSS --------------- */
function clean_css_dest()
{
    return src(css_dest + '/*', {read: false}).pipe(clean());
}

function handle_css_files()
{
    return src(css_src)
    .pipe(rev())
    // 压缩css
    .pipe(cleanCss())
    .pipe(dest(css_dest))
    .pipe(rev.manifest())
    .pipe(dest(css_dest));
}

/* --------------- 压缩打包JS --------------- */
function clean_js_dest()
{
    return src(js_dest + '/*', {read: false}).pipe(clean());
}

//检查js语法
function check_js()
{
    return src(js_src)
    .pipe(jsLint())
    .pipe(jsLint.reporter('default'));
}

// 处理js文件
function handle_js_files()
{
    return src(js_src)
    .pipe(babel())          // ES6语法转换
    .pipe(rev())            // 文件名添加版本号
    .pipe(uglify())         // 压缩js
    .pipe(dest(js_dest))    // 将文件生成到目标文件夹
    .pipe(rev.manifest())   // 生成rev-manifest.json文件名映射
    .pipe(dest(js_dest));   // 将文件生成到目标文件夹
}

/* --------------- 替换处理 --------------- */

// 替换html中引入的js文件, 加版本号
html_replace =  function ()
{
    return src([js_dest + '/*.json', html_replace_src]).pipe(revCollector({ replaceReved: true })).pipe(dest(html_replace_dest));
}

// 替换html中引入的css文件, 加版本号
css_replace = function ()
{
    return src([css_dest + '/*.json', html_replace_src]).pipe(revCollector({ replaceReved: true })).pipe(dest(html_replace_dest));
}


// 替换js中引入的文件, 加版本号
js_replace = function ()
{
    return src([js_dest + '/*.json', js_replace_src]).pipe(revCollector({ replaceReved: true })).pipe(dest(js_replace_dest));
}

//-------------------------------------------------------------------------------------------------------
//----------------------------------  开发模式打包 ----------------------------------
//-------------------------------------------------------------------------------------------------------

/* --------------- 压缩打包CSS --------------- */
function dev_clean_css_dest()
{
    return src(css_dest + '/*', {read: false}).pipe(clean());
}

function dev_handle_css_files()
{
    return src(css_src)
    .pipe(rev())
    .pipe(dest(css_dest))
    .pipe(rev.manifest())
    .pipe(dest(css_dest));
}

/* --------------- 压缩打包JS --------------- */
function dev_clean_js_dest()
{
    return src(js_dest + '/*', {read: false}).pipe(clean());
}

//检查js语法
function dev_check_js()
{
    return src(js_src)
    .pipe(jsLint())
    .pipe(jsLint.reporter('default'));
}

// 处理js文件
function dev_handle_js_files()
{
    return src(js_src)
    .pipe(rev())            // 文件名添加版本号
    .pipe(dest(js_dest))    // 将文件生成到目标文件夹
    .pipe(rev.manifest())   // 生成rev-manifest.json文件名映射
    .pipe(dest(js_dest));   // 将文件生成到目标文件夹
}

/* --------------- 替换处理 --------------- */

// 替换html中引入的js文件, 加版本号
function dev_html_replace ()
{
    return src([js_dest + '/*.json', html_replace_src]).pipe(revCollector({ replaceReved: true })).pipe(dest(html_replace_dest));
}

// 替换html中引入的css文件, 加版本号
function dev_css_replace ()
{
    return src([css_dest + '/*.json', html_replace_src]).pipe(revCollector({ replaceReved: true })).pipe(dest(html_replace_dest));
}


// 替换js中引入的文件, 加版本号
function dev_js_replace ()
{
    return src([js_dest + '/*.json', js_replace_src]).pipe(revCollector({ replaceReved: true })).pipe(dest(js_replace_dest));
}

// 默认导出函数, 会压缩原文件
exports.default = series(
    clean_css_dest,
    handle_css_files,
    clean_js_dest,
    check_js,
    handle_js_files,
    html_replace,
    css_replace,
    js_replace,
);

// 开发时导出, 不压缩原文件, 利于在调试js的时候找错误
exports.dev = series(
    dev_clean_css_dest,
    dev_handle_css_files,
    dev_clean_js_dest,
    dev_check_js,
    dev_handle_js_files,
    dev_html_replace,
    dev_css_replace,
    dev_js_replace,
);

能力有限, 但是能保证上述gulpfile良好运行.

执行gulp

上述gulpfile.js编写好后, 执行命令开始运行编写好的gulp任务

# 默认模式, 也就是生产模式
$ gulp
[16:03:56] Using gulpfile /www/wwwroot/test/Gulpfile.js
[16:03:56] Starting 'default'...
[16:03:56] Starting 'clean_css_dest'...
[16:03:56] Finished 'clean_css_dest' after 23 ms
[16:03:56] Starting 'handle_css_files'...
[16:03:56] Finished 'handle_css_files' after 43 ms
[16:03:56] Starting 'clean_js_dest'...
[16:03:56] Finished 'clean_js_dest' after 8.07 ms
[16:03:56] Starting 'check_js'...
[16:03:56] Finished 'check_js' after 131 ms
[16:03:56] Starting 'handle_js_files'...
[16:03:57] Finished 'handle_js_files' after 642 ms
[16:03:57] Starting 'html_replace'...
[16:03:57] Finished 'html_replace' after 46 ms
[16:03:57] Starting 'css_replace'...
[16:03:57] Finished 'css_replace' after 30 ms
[16:03:57] Starting 'js_replace'...
[16:03:57] Finished 'js_replace' after 5.26 ms
[16:03:57] Finished 'default' after 932 ms

# 开发模式
$ gulp dev
[16:04:40] Using gulpfile /www/wwwroot/test/Gulpfile.js
[16:04:40] Starting 'dev'...
[16:04:40] Starting 'dev_clean_css_dest'...
[16:04:40] Finished 'dev_clean_css_dest' after 25 ms
[16:04:40] Starting 'dev_handle_css_files'...
[16:04:40] Finished 'dev_handle_css_files' after 15 ms
[16:04:40] Starting 'dev_clean_js_dest'...
[16:04:40] Finished 'dev_clean_js_dest' after 8.77 ms
[16:04:40] Starting 'dev_check_js'...
[16:04:40] Finished 'dev_check_js' after 150 ms
[16:04:40] Starting 'dev_handle_js_files'...
[16:04:40] Finished 'dev_handle_js_files' after 28 ms
[16:04:40] Starting 'dev_html_replace'...
[16:04:40] Finished 'dev_html_replace' after 46 ms
[16:04:40] Starting 'dev_css_replace'...
[16:04:40] Finished 'dev_css_replace' after 35 ms
[16:04:40] Starting 'dev_js_replace'...
[16:04:40] Finished 'dev_js_replace' after 6.12 ms
[16:04:40] Finished 'dev' after 318 ms

注意点:

1. 这两个插件 gulp-rev-dxb , gulp-rev-collector-dxb 还有另外两个版本 gulp-rev, gulp-rev-collector, 两中插件执行版本号替换的时候规则不同,
   带 dxb 的替换效果 <script type="module" src="/js/dest/main_app.js?v=6fbd7ade2c"></script>
   不带dxb 的替换效果 <script type="module" src="/js/dest/main_app-6fbd7ade2c.js?"></script>

2. 安装插件不要用 cnpm 会安装出很多错误, 使用npm然后换源的做法比较靠谱