欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

基于gulp搭建的前端自动化构建

程序员文章站 2022-04-01 22:57:12
...

基于gulp搭建的前端自动化构建,需要对gulp做文件路径配置,执行打包命令即可
官网链接:https://www.gulpjs.com.cn/

  1. 首先新建项目文件夹后,项目目录下创建 package.json 文件。
npm init

基于gulp搭建的前端自动化构建

  1. 安装 gulp 命令行工具
npm install --global gulp-cli
  1. 安装 gulp,作为开发时依赖项
npm install --save-dev gulp
  1. 新建gulpfile.js文件,简单方法表示如下:
function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask
  1. 在项目根目录下执行 gulp 命令
gulp

基于gulp搭建的前端自动化构建

  1. 现对gulpfile.js进行详细配置
gulp插件

我们要处理文件的合并、压缩等操作,接口中没有提供,都放在了插件中。

插件下载:

npm install 插件名 --save-dev

gulp-concat : 合并文件(js/css)

gulp-uglify : 压缩js文件

gulp-rename : 文件重命名

gulp-less : 编译less

gulp-sass:编译sass

gulp-clean-css : 压缩css

gulp-livereload : 实时自动编译刷新

gulp-htmlmin:压缩html文件

gulp-connect:热加载,配置一个服务器

gulp-load-plugins:打包插件(里面包含了其他所有插件)

未完全补全插件的信息,可根据下方代码文件看插件名称来下载,或者学习官网插件api。

代码文件见如下:
首先对需要引用的文件写完整

var gulp = require('gulp'),
    mincss = require('gulp-mini-css'),
    uglify = require('gulp-uglify'),
    htmlmin = require('gulp-htmlmin'),
    plumber = require('gulp-plumber'),
    Replace = require('gulp-replace'),
    processhtml = require('gulp-processhtml'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    imageminJpegtran = require('imagemin-jpegtran'),
    imageminGifsicle = require('imagemin-gifsicle'),
    imageminOptipng = require('imagemin-optipng'),
    imageminSvgo = require('imagemin-svgo'),
    domSrc = require('gulp-dom-src'),
    cheerio = require('gulp-cheerio'),
    cache = require('gulp-cache'),
    gutil = require('gulp-util'),
    babel = require("gulp-babel");

其次命名标示清楚需要打包压缩的源文件,即src_xx命名信息,以及目的文件,命名未dest_xx信息。

var src_css = './src/css',
    dest_css = './dest/css',
    src_html = './src',
    dest_html = './dest',
    src_img = './src/img',
    dest_img = './dest/img',
    src_js = './srcA/js',
    dest_js = './dest/js',

针对打包异常可采用控制台发声

var date = new Date().getTime();
function errrHandler( e ){
    // 控制台发声,错误时beep一下
    gutil.beep();
    gutil.log(e);
    this.emit('end');
}

最重要的就是建立gulp执行打包的方法,这里是分别对image/html/js/css等进行处理打包,function方法中需要添加好src_xx的路径信息,具体实现为固定写法,想了解深层次含义可以学习官网api。以下建立的task任务,命名分别为 ‘imagemin’ / ‘htmlmin’ / ‘minjs’ / ‘mincss’。

gulp.task('imagemin', function () {
    gulp.src(src_img + '/**/*.{png,jpg,gif,ico}')
        .pipe(plumber({errorHandler: errrHandler}))
        .pipe(imagemin({
            progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
            use: [pngquant(), imageminJpegtran({progressive: true})
                , imageminGifsicle({interlaced: true}),
                imageminOptipng({optimizationLevel: 3}), imageminSvgo()]
            //使用pngquant深度压缩png图片的imagemin插件
        }))
        .pipe(gulp.dest(dest_img));
});

gulp.task('htmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };

    gulp.src([src_html+'/**/*.html','!./srcA/{service,hardware}.html'])

        .pipe(plumber({errorHandler: errrHandler}))
        .pipe(Replace(/_VERSION_/gi, date))
        .pipe(processhtml())
        .pipe(htmlmin(options))
        .pipe(gulp.dest(dest_html));

});
gulp.task('mincss', function () {
    gulp.src(src_css+'/**/*.css')
        .pipe(mincss())
        .pipe(gulp.dest(dest_css));
});
gulp.task('minjs', () => {
    return gulp.src(src_js+'/**/*.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(dest_js));
});

打包的任务列举清楚后,下一步就是一次性执行任务了,也可针对上面的压缩单独操作。一般情况下可通过建立一个通用task 依次跑通所有的打包压缩任务,即使用gulp.run方法执行。

gulp.task('default',['clean'],function(){
    gulp.run('minjs','mincss','htmlmin','imagemin');
    // gulp.run('watch');
});

这里有注释了一个watch方法,即为监听,当我执行打包压缩后,我修改了开发工具中的代码,该watch方法可自动为项目进行打包压缩,十分便捷。

gulp.task('watch', function () {
    gulp.watch(src_css+'/**/*.css',['mincss']);
    gulp.watch(src_js+'/**/*.js',['minjs']);
    gulp.watch(src_html+'/*.html',['htmlmin']);
    gulp.watch(src_img+'/**/*.{png,jpg,gif,ico}',['imagemin']);
});

这里也写了一个缓存清除的task,可跟随默认打包一起执行使用。

gulp.task('clean', function (done) {//清除缓存
    return cache.clearAll(done);
});

gulpfiles.js文件 即为上述代码段连接而成,有需要可私信邮箱发送给你

gulp常用命令

执行压缩: gulp default / gulp
编译页面: gulp htmlmin
编译脚本: gulp minjs
编译样式: gulp mincss
压缩图片: gulp imagemin
//语法检测: gulp eslint
相关标签: 前端 js gulp