再学一次gulp自动化构建项目（含有开发环境和生产环境之分）

作者: 图恩分类: 编程开发阅读: 544发布时间： 2021-08-10 22:30:21

前言

用gulp构建官网的项目，起初用别人配置好的gulpfile来构建，后来发现有很多不人性化的操作，比如说在开发调试中，打印出console，按这个去找源文件的出处，发现代码被压缩了，找的可费劲了，说白就是没分配好开发环境和生产环境的。然后是在生产环境中没清除掉console，作为一枚处女座，忍受不了，于是打算大改造gulpfile.js。如有不足之处，请指出来哈，我将会献上我的膝盖~

分配开发环境和生产环境

  • 在本项目的根目录下新建一个文件夹，命名为"config"，放入相关gulp的配置文件
  • 在config的文件夹里，新建一个文件，为"index.js"，放入相关路径的配置
const SRC_DIR='./src/';   //源路径，不支持相对路径，下面也是
const DEV_DIR='./dev/';   //生成开发环境的文件
const DIST_DIR='./dist/';  //生成生产环境的文件


const config={
    src:SRC_DIR,
    dist:DIST_DIR,
    dev:DEV_DIR,
    html:{
        src:SRC_DIR+'*.html',
        dev:DEV_DIR,
        dist:DIST_DIR
    },
    assets:{
        src:SRC_DIR+'assets/**/*',
        dev:DEV_DIR+'assets',
        dist:DIST_DIR+'assets'
    },
    style:{
        src:SRC_DIR+'style/*.less',  //如果是scss或者css，就改对应的
        dev:DEV_DIR+'css',
        dist:DIST_DIR+'css'
    },
    script:{
        src:SRC_DIR+'script/*.js',
        dev:DEV_DIR+'js',
        dist:DIST_DIR+'js'
    },
    img:{
        src:SRC_DIR+'images/**/*',
        dev:DEV_DIR+'images',
        dist:DIST_DIR+'images'
    }
};

module.exports=config;  //把这个接口暴露给别的文件用
  • 在config中新建两个文件，分别为"gulpfile.dev.js"，"gulpfile.prod.js"
  • gulpfile.dev.js

const gulp=require('gulp'); //引用gulp插件
const $=require('gulp-load-plugins')();  //自动加载插件，可以省略一个一个引用插件
const config=require('./index.js'); //引用配置的路径文件
const open=require('open'); //开启服务

function dev(){
    gulp.task('html:dev',function(){
        return gulp.src(config.html.src).pipe($.fileInclude()).pipe(gulp.dest(config.html.dev)).pipe($.connect.reload())
    });
    gulp.task('assets:dev',function(){
        return gulp.src(config.assets.src).pipe(gulp.dest(config.assets.dev)).pipe($.connect.reload())
    });
    gulp.task('style:dev',function(){
        return gulp.src(config.style.src).pipe($.less()).pipe($.autoprefixer({
                browseers: ['last 2 versions','Firefox>=20','last 2 Explorer versions','last 3 Safari versions'],
                cascade: true
        })).pipe(gulp.dest(config.style.dev)).pipe($.connect.reload())
    });
    gulp.task('script:dev',function(){
        return gulp.src(config.script.src).pipe($.babel()).pipe($.babel()).pipe(gulp.dest(config.script.dev)).pipe($.connect.reload())
    });
    gulp.task('img:dev',function(){
        return gulp.src(config.img.src).pipe($.imagemin()).pipe(gulp.dest(config.img.dev)).pipe($.connect.reload())
    });
    gulp.task('dev',['html:dev','style:dev','script:dev','img:dev'],function(){
            $.connect.server({
                root:config.dev,
                port:3030,
                livereload:true
            });
            open('http://localhost:3030');
            gulp.watch(config.html.src,['html:dev']);
            gulp.watch(config.html.src,['style:dev']);
            gulp.watch(config.html.src,['script:dev']);
            gulp.watch(config.html.src,['img:dev']);
    })
}
module.exports=dev;
  • gulpfile.prod.js
//配置生产的文件

const gulp=require('gulp'); //引用gulp插件
const $=require('gulp-load-plugins')();  //自动加载插件，可以省略一个一个引用插件
const config=require('./index.js'); //引用配置的路径文件

function prod(){
    gulp.task('html',function(){
        return gulp.src(config.html.src).pipe($.fileInclude()).pipe(gulp.dest(config.html.dist))
    });
    gulp.task('assets',function(){
        return gulp.src(config.assets.src).pipe(gulp.dest(config.assets.dist))
    });
    gulp.task('style',function(){
        return gulp.src(config.style.src).pipe($.less()).pipe($.autoprefixer({
                browseers: ['last 2 versions','Firefox>=20','last 2 Explorer versions','last 3 Safari versions'],
                cascade: true
        })).pipe($.cleanCss({compatibility: 'ie8'}))
        .pipe(gulp.dest(config.style.dist))
    });
    gulp.task('script',function(){
        return gulp.src(config.script.src)
        .pipe($.babel())
        .pipe($.uglify())
        .pipe($.stripDebug({
            debugger:true,console:true,alert:false
        }))
        .pipe(gulp.dest(config.script.dist))
    });
    gulp.task('img',function(){
        return gulp.src(config.img.src).pipe($.imagemin()).pipe(gulp.dest(config.img.dist))
    });
    gulp.task('build',['html','style','script','assets','img'])
}
module.exports=prod;

是不是一目了然呢？

最后新建gulpfile.js

  • 在本项目的根目录下新建一个文件，为gulefile.js，命令行都是通过这个文件启动
const gulp=require('gulp');
const prod=require('./config/gulpfile.prod.js');
const dev=require('./config/gulpfile.dev.js');
const config=require('./config/index.js');
const $=require('gulp-load-plugins')(); 

dev();  //启动开发环境，gulp dev
prod(); //启动生产环境,  gulp prod

gulp.task('clean',function(){
    gulp.src([config.dev,config.dist])
    .pipe($.clean());
});
gulp.task('sprite', function () {  //生成雪碧图，gulp sprite,分别生成dev和dist
  let spriteData = gulp.src(config.src+'/images/sprite_2/*.png')
  .pipe($.spritesmith({
    imgName: 'images/sprite_2.png',
    cssName: 'css/sprite.css',
    padding: 2, // 图片之间的间距
    algorithm: 'left-right', //图片排列格式，默认是top-down，我这里稍微修改下
    algorithmOpts: {sort: false} //是否排序
  }));

  return spriteData.pipe(gulp.dest(config.dist)).pipe(gulp.dest(config.dev));
});

插件介绍

  • gulp-autoprefixer

    • 这个是提供自动添加兼容浏览器的前缀，不需要我们手动添加，不过这并不全的。

  • gulp-clean

    • 每次生成dist和dev，有时为了预防缓存的问题，需要清除的，但每次要手动清除，作为懒癌症的我都嫌弃了，只想用命令运行就清除掉，所以用这个插件的。

  • gulp-clean-css

    • 清除css的注释，减少文件的大小，同时为了减少请求的延迟

  • gulp-connect

    • 这个是创建本地服务器，还能热启动加载

  • gulp-file-include

    • 这个是神器的哈，引用共同的html模板，代码如下
    //meta.html
<title>@@title</title>
//index.html
@@include('./page/meta.html',{
    "title":"首页"
})

  • gulp-imagemin

    • 压缩图片的大小

  • gulp-less

    • 把less转化为css

  • gulp-load-plugins

    • 这个是神器的，当引用多个插件的，一个一个require，多繁杂啊，仅require这个插件的，然后在引用其他的插件时，只要写"$.<插件名>"
    • 插件名的例子如下
    1、gulp-connect
    $.connect
2、gulp.spritesmith
    $.spritesmith
3、gulp-file-include
    $.fileInclude

  • gulp-strip-debug

    • 去除掉console，alert，debug，对生产环境特别有用。
    • 其实我一开始是拒绝这个插件的，因为这个官方文档没说明不除掉alert的方法，然后没有其他的不错类似这个的插件，只能硬着头皮查更多关于这个的资料，结果找到了，只不过有差别的。下面会给出参考网址
    • 要除掉alert的话，就在生产环境的文件中配置
    $.stripDebug({
    debugger:true,console:true,alert:false
})

    我以为结束了，兴高采烈的运行生产环境，手抖的戳，等了“半天”，没看到alert弹出来，emmm，抱自己痛哭的去看参考网址，卧槽，还要改插件的配置，这个开发者是懒得再多配置了么？好吧～

    • 去node_modules里找gulp-file-include/index.js，然后加options，意思是接受上面的配置
    const through = require('through2');
const stripDebug = require('strip-debug');
const PluginError = require('plugin-error');
module.exports = (options) => {
    return through.obj(function (file, enc, cb) {
        if (file.isNull()) {
            cb(null, file);
            return;
        }
        if (file.isStream()) {
            cb(new PluginError('gulp-strip-debug', 'Streaming not supported'));
            return;
        }
        try {
            file.contents = Buffer.from(stripDebug(file.contents.toString(),options).toString());
            this.push(file);
        } catch (err) {
            this.emit('error', new PluginError('gulp-strip-debug', err, {fileName: file.path}));
        }
        cb();
    });
};
    • 然后再找node_modules里找strip-debug/index.js，修改最后的一段函数
    module.exports = ((source,options) =>{
    options=options || {};
    return rocambole.moonwalk(source, node => {
    options.debugger!==false && stripDebugger(node);
    options.console!==false && stripConsole(node);
    options.alert!==false && stripAlert(node);
    })
})

    ok了，喜极而泣～

  • gulp-ugllify

    • 压缩js的代码

  • gulp.spritesmith

    • 生成雪碧图

  • open

    • 这个适合懒癌症的人，不需要每次启动服务时就手动打开浏览器的

然后至于怎么用，看上面的gulpfile配置喽！

然后献上：https://blog.csdn.net/qq_15096707/article/details/54293203
我是参考这个，思路不错的，可以“去粗取精”

本文章由javascript技术分享原创和收集

本文由作者创作或收集，内容引用如有问题请联系站长处理。

发表评论 (审核通过后显示评论)：

© 基于nuxt
粤ICP备20013202号
© 2020-2024 javascript技术分享