gulp使用笔记

首先npm install gulp --save-dev

然后在package.json中的build中加入

新建gulpfile.js

安装plugin

npm i gulp-sass gulp-autoprefixer gulp-load-plugins gulp-uglify del --save-dev

gulpfile.js下

const {src,dest,series,watch} = require('gulp')//引入gulp

const del = require('del')

const plugins = require('gulp-load-plugins')()

//引入这个组件，即省略了其他组件如const plugins.uglify = require(gulp-uglify)的过程，

//直接plugins.uplify使用即可

function js(cb) {

    src('js/*.js')//选择要处理的目标，这里指gulpfile.js的平级目录js里的所有js文件

//下一个处理

        .pipe(plugins.uglify())//执行混肴插件，混肴上述的js文件

        .pipe(dest('./dist/js'))//将混肴结果输出到dist下的js文件夹

    cb()

}

function css(cb) {

    src('css/*.scss')

        .pipe(plugins.sass({outputStyle:'compressed'}))//压缩sass

        .pipe(plugins.autoprefixer({                    //自动前缀

            cascade:false,                              //不串联

            remove:false                                //自动删除过期的前缀

        }))

        .pipe(dest('./dist/css'))

    cb()

}

//监听文件变化

function watcher() {

    watch('js/*.js',js)//监听js目录下的js文件，执行上述js方法

    watch('css/*.scss',css)

}

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

    del('./dist')

    cb()

}

exports.scripts = js //npx gulp script将执行上述js方法

exports.styles = css

exports.clean = clean

exports.default = series([//修改了文件自动生成 使用build执行以上方法

    clean,

    js,

    css,

    watcher

])

执行build，就可以在新生成的dist中看到js，css方法打包进去的文件了，但此时依然不能够热加载，需要引入browser-sync

npm install browser-sync --save-dev

此时，我们npm run build，就会弹出页面，我们修改同级目录下的css/index.html,就会自动更新调用reload(),从而实现更新效果，并同步dist目录下的css/index.scss。