Gulp

前端構(gòu)建工具替废，類似webpack粒竖。

1. 方便使用
2. 構(gòu)建快速
3. 插件系統(tǒng)
4. 易于學(xué)習(xí)

gulp flow

擴(kuò)展插件可以在npmjs上搜索到

安裝

npm init -y 初始化項(xiàng)目
yarn add gulp -D 

Package.json

...
"scripts": {
    "build": "gulp"
  },  ..

 npx gulp --version 查看gulp版本
 npm run build 執(zhí)行g(shù)ulp

新建gulpfile.js文件

//壓縮js
function js() {
  console.log("This is js scripts task")
}
//對(duì)scss/less 編譯輸出css文件
function css() {
    console.log("This is css styles task")

}
//監(jiān)聽這些文件的變化
function watcher() {

}
//刪除dist目錄中的內(nèi)容
function clear() {

}
exports.scripts = js
exports.css = css
exports.default = function () {
    console.log("hello gulp")
}

查看gulp的task：
npx gulp --tasks 
執(zhí)行單個(gè)task
npx gulp scripts

使用插件

插件列表

1. Unglify 混淆 https://www.npmjs.com/package/gulp-uglify
2. Rename 重命名 https://www.npmjs.com/package/gulp-rename
3. Del 清空disk目錄的https://www.npmjs.com/package/del
4. Autoprefixer 樣式預(yù)處理 https://www.npmjs.com/package/gulp-autoprefixer
5. Sass 使用sass https://www.npmjs.com/package/gulp-sass
6. loadplugins 方便引用插件台舱，不用在插件名字前面加gulp-了 https://www.npmjs.com/package/gulp-load-plugins

yarn add gulp-sass gulp-autoprefixer gulp-load-plugins gulp-uglify del -D

實(shí)時(shí)編譯

Browsersync+Gulp

https://www.browsersync.io/docs/gulp

yarn add browser-sync -D

Gulp file

const { src, dest, series, watch } = require('gulp')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload
const del = require('del') //不是gulp開頭挣磨，所以不能直接引用
//gulp-uginlify => plugins.uglify =require('gulp-uglify')
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() //callback方法莽鸭，異步任務(wù)gulp會(huì)報(bào)錯(cuò)金蜀，所以用一個(gè)callback來回調(diào)刷后，就不會(huì)報(bào)錯(cuò)來
}
//對(duì)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()
}
//監(jiān)聽這些文件的變化
function watcher() {

    watch('js/*.js',js)
    watch('css/*.scss',css)
}
//刪除dist目錄中的內(nèi)容
function clean(cb) {
    del('./dist')
    cb()
}
//Server 任務(wù)
function serve(cb){
    browserSync.init({
        server: {
             baseDir: './'
        }
    })
    cb()
}

exports.scripts = js
exports.css = css
exports.clean = clean
exports.watche = watcher
exports.default = series ([
    clean,
    js,
    css,
    serve,
    watcher
])