2020-09-09

gulp理论

新建项目

npm init -y

安装gulp

yarn add gulp -D

添加启动build

npx gulp --version 查看gulp版本

新建gulpfile.js

// 压缩js uglifyjs

function js () {

console.log('js')

}

// 对scss less编译 压缩 输出css文件

function css () {

console.log('css')

}

// 监听这些文件的变化

function watcher() {

console.log('watcher')

}

exports.scripts =js

exports.watcher =watcher

exports.styles =css

exports.default =function(){

console.log('hello gulp')

}

配置并运行

※ npx gulp --tasks

查看所有当前的任务

npx gulp scripts  执行这个 task

准备安装gulp插件
yarn add gulp-sass gulp-autoprefixer gulp-load-plugins gulp-uglify dev -D

注意安装中如果报错

以（管理员）！！！！！！的身份运行以下命令

cnpm install --global --production windows-build-tools

管理员！！！

出现pythonxxxxxx 错误可在以上部分解决

重新运行

执行npx gulp xxx时

卡在.......................checking installable status

npm config set registry https://registry.npm.taobao.org

npm config get registry 查看源

再次执行 安装 加速！！！！

根据上述配置

npm install

css 样式配置

browsersync 页面热刷新
https://www.browsersync.io/docs/gulp

配置

yarn add browser-sync -D

优于 1st