gulp打包css,js文件

gulp学习记录
npm init -y

yarn add gulp -D

修改 package.json
"scripts": {
"build": "gulp"
},

// 查看版本
npx gulp --version

新建 gulpfile.js

// 重命名
gulp-rename

// 压缩js
gulp-uglify
yarn add gulp-sass@4.0.2 gulp-autoprefixer@6.1.0
gulp-load-plugins@2.0.0
gulp-uglify@3.0.2
del@5.0.0
-D

npm run build

yarn add browser-sync -D

------------------

  gulpfile.js

const {src,dest,series,watch} = require('gulp')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload
const del = require('del')
const plugins = require('gulp-load-plugins')()

// 压缩js
function js(cb){
    src('js/*.js')
        // 下一个处理环节
        .pipe(plugins.uglify())
        .pipe(dest('./dist/js'))
        .pipe(reload({stream:true}))
    cb()
}


// 对 scss/less 编译压缩, 输出css文件
function css(cb){
    src('css/*.scss')
        .pipe(plugins.sass({outputStyle:"compressed"}))
        .pipe(plugins.autoprefixer({
            cascade: false,
            remove: false
        }))
        .pipe(dest('./dist/css'))
        .pipe(reload({stream:true}))
    cb()
}  

// 监听这些文件的变化
function watcher(){
    watch('js/*.js',js)
    watch('css/*.scss',css)
}

// 删除dist 目录中的内容
function clean(cb){
    del('./dist')
    cb()
}

// server 任务
function serve(cb){
    browserSync.init({
        server:{
            baseDir:"./"
        }
    })
    cb()
}



exports.scripts = js
exports.styles = css
exports.clean = clean
exports.default = series([
    clean,
    js,
    css,
    serve,
    watcher
])
 
---------package.json-----------
   
{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "gulp"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.27.10",
    "del": "^6.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-load-plugins": "^2.0.7",
    "gulp-sass": "4.0.2",
    "gulp-uglify": "^3.0.2"
  },
  "browserslist": [
    "last 2 Version",
    "> 2%"
  ]
}
 
---------------index.html-------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/css/index.css">
</head>
<body>
   
    hello Eric

    <script src="./dist/js/index.js"></script>
</body>
</html>
 
-------------------------
  

 

 

posted @ 2022-05-22 11:04  13522679763-任国强  阅读(72)  评论(0)    收藏  举报