glup使用第一节 script.js

最新推荐文章于 2022-06-21 19:21:17 发布

原创最新推荐文章于 2022-06-21 19:21:17 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#glup

本文介绍了一个基于Gulp的前端项目构建流程，包括文件拼接、压缩、重命名及实时刷新等功能。通过Webpack和Babel等工具实现JS模块转换与打包，确保了项目的高效开发与部署。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import gulp from 'gulp';  // 项目 是基于 gulp 进行构建
import gulpif from 'gulp-if';
import concat from 'gulp-concat'; // gulp 中处理文件的 拼接
import webpack, { Stats } from 'webpack';
import gulpwebpack from 'webpack-stream';
import name from 'vinyl-named';
import livereload from 'gulp-livereload'; // 文件刷新的包
import plumber from 'gulp-plumber';
import rename from 'gulp-rename'; // 文件重命名
import uglify from 'gulp-uglify'; // 压缩 js css 的包
import {log,colors} from 'gulp-util'; // 日志  颜色的 包
import args from './util/args'; // 自定义解析包

gulp.task('scripts',()=>{
    return gulp.src(['app/js/index.js'])
    .pipe(plumber({
        errorHandle: function(){

        }
    }))
    .pipe(name())
    .pipe(gulpwebpack({
        module:{
            loaders:[{
                test: /\.js$/,
                loader: 'babel-loader'
            }]
        }
    }),null,(err,stats)=>{
        log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
            chunks: false
        }))
    })
    .pipe(gulp.dest('server/public/js')) // 打开编译  指定路径
    .pipe(rename({  // 处理压缩功能  
        basename: 'cp',
        extname: '.min.js'
    }))
    .pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
    .pipe(gulp.dest('server/public/js'))
    .pipe(gulpif(args.watch,livereload())) // 文件热刷新
})