详解 Gulp4 和 Gulp3 的区别

最近在开发几个网站,为了优化一下前端代码,就复习一下gulpjs,之前工作gulp用的版本比较老,但是今天看了新的版本,新的语法出了一下,但是为了时间,我决定使用之前gulp3的旧版本,后面发现自己环境的node的版本是最新的,所以不得让我来了解一下gulp的新版本,里面用到的最多就是commonjs的模块化,解释如下:

gulp4的官网地址: https://www.gulpjs.com.cn/
gulp3的官网地址: https://v3.gulpjs.com.cn/

详解 Gulp4 和 Gulp3 的区别_第1张图片
第一步:安装所有插件:

npm install gulp gulp-rename gulp-uglify gulp-clean-css gulp-connect gulp-webserver gulp-clean gulp-file-include gulp-htmlmin --save-dev

第二步:创建gulpfile.js文件,将下面的代码放入该文件中。
最后一步:在命令行中进入项目根目录,运行以下命令即可执行压缩任务:

gulp

此命令会依次执行 CSS、JS、HTML 和图片文件的压缩任务,将压缩后的文件分别输出到指定的压缩目录中。
在开发过程中,若需要实时监控文件变化并自动执行压缩任务,可以运行以下命令:

gulp watch

这样,当 src 目录下的文件发生变化时,对应的压缩任务会自动执行。
下面代码(gulpfile.js)了解新语法:

const { src, dest, watch, task, series, parallel } = require('gulp');//gulp的文件流API
const rename                                       = require('gulp-rename');//文件重命名的插件
const uglify                                       = require('gulp-uglify');//压缩JS文件的插件
const cleanCss                                     = require('gulp-clean-css');//压缩CSS文件的插件
const connect                                      = require('gulp-connect');//热更新的插件
const webserver                                    = require('gulp-webserver');//热更新的插件
const clean                                        = require('gulp-clean');//删除文件的插件
const fileInclude                                  = require('gulp-file-include'); //公共代码复用的插件
const htmlmin                                      = require('gulp-htmlmin');//压缩HTML文件的插件

//设置源文件和输出文件的目录配置
const path = {
    'html'           : './src/',
    'css'            : './src/css/',
    'js'             : './src/js/',
    'lib'            : './src/lib/',
    'component'      : './src/component/',
    'html_dist'      : './dist/',
    'css_dist'       : './dist/css/',
    'js_dist'        : './dist/js/',
    'lib_dist'       : './dist/lib/',
    'component_dist' : './dist/component/'
};


//设置HTML压缩任务
task('html', function () {
    var options = {
        removeComments                : true, //清除HTML中的注释
        collapseWhitespace            : true, //去除HTML中的空格
        collapseBooleanAttributes     : true, //省略布尔属性的值 压缩后为 
        removeEmptyAttributes         : true, //删除所有空格作属性值 压缩后为 
        removeScriptTypeAttributes    : true, //删除
                    
                    

你可能感兴趣的:(前端笔记【Gulp】,gulp)