Gulpfile.js

'wx

于 2022-02-12 21:44:54 发布

阅读量441

点赞数

分类专栏： gulp 文章标签： javascript 前端

本文链接：https://blog.csdn.net/aYao__/article/details/122902618

版权

gulp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Gulp进行CSS和JavaScript文件的合并、压缩，并配合Webserver实现服务器启动、watch任务监视文件变化。涉及gulp-concat、gulp-uglify、autoprefixer等工具的运用和del模块的清理工作。

摘要由CSDN通过智能技术生成

css和js打包以及webserver服务器启动和watch监视

var gulp = require('gulp')
var concat = require('gulp-concat')
var uglify = require('gulp-uglify')
var rename = require('gulp-rename')
var cssmin = require('gulp-cssmin')
const autoPrefixer = require('gulp-autoprefixer')
const babel = require('gulp-babel')
const del = require('del')
const webserver = require('gulp-webserver')
const watch = require('gulp-watch')
// 处理css文件
const cssf = function(){
    return gulp
        .src('src/css/*.css')
        .pipe(autoPrefixer())
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css/'))
}

// 合并js文件
// gulp3语法
// gulp.task('js',function(){
//     return gulp.src('src/js/**/*.js')   //源文件
//     .pipe(concat('built.js'))
//     .pipe(uglify())
//     .pipe(rename({suffix:'.min'}))
//     .pipe(gulp.dest('dist/js/'))


// })

// gulp4语法
const jsConcat = function () {
    return gulp.src('src/js/**/*.js')   //源文件
        .pipe(babel())
        .pipe(concat('built1.js'))
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/js/'))
}

// 删除目录
function delf(){
    return del(['/dist'])
}

// 创建一个启动服务器的任务
const webf = function(){
    return gulp
        .src('dist')
        .pipe(webserver({
            host:'localhost',
            port:'3000',
            livereload:true,
            open:'views/login.html',
        }))
}


// 添加watch任务
const watchf = function(){
   return gulp.watch('src/css/*.css',cssf)
}

// 将定义的方法导出即可
module.exports.cssf = cssf
module.exports.jsConcat=jsConcat
module.exports.delf = delf
module.exports.watchf = watchf
// //定义默认任务
// 并行
// const res = gulp.parallel(delf,jsConcat,cssf)
// 完成一个再执行一个
const res =gulp.series(
    delf,
    gulp.parallel(jsConcat,cssf),
    webf,
    watchf
    )

module.exports.default = res