gulp

项目实战 1.环境介绍 2.nvm和node.js环境配置 3.npm使用详解 4.gulp介绍和安装 5.gulp创建任务 6.gulp创建处理css文件任务 7.gulp给文件重命名 8.gulp处理JavaScript文件的任务 9.合并多个文件 10.创建压缩图片任务 11.监听文件修改，自动执行任务 12.修改代码实时刷新浏览器 13.项目环境搭建和安装相应包 14.编写gulpfile.js文件 15.sass语法介绍和转换为css 16.导航条实现（1） 17.导航条实现（2） 18.导航条实现（3） 19.导航条吸顶效果 20.轮播图布局和样式 21.JS面向对象和实现一次轮播 22.实现自动轮播 23.鼠标hover事件控制轮播图暂停和继续 24.切换轮播图的箭头样式及其显示和隐藏事件 25.轮播图上下切换 26.小圆点结构和样式 27.根据轮播图的个数动态修改小圆点结构和样式 28.小圆点点击事件和自动更新当前选中的小圆点 29.实现自动无限循环轮播 30.左右箭头切换实现循环轮播 31.新闻列表tab栏布局完成 32.新闻列表页布局完成 33.加载更多按钮的布局和样式 34.侧边栏-标题和广告位布局完成 35.侧边栏-关注第三方平台盒子布局和样式 36.侧边栏-热门推荐完成 37.footer布局和样式（1） 38.footer布局和样式（2） 39

一，执行步骤，打包报错 1，查看npm版本 npm -v 2，查看gulp版本（报错怎么证明没安装） gulp --version 3，安装gulp npm install --global gulp-cli 4，安装npm npm install 5，查看node版本（要选择稳定版，不要选最新版） node -v 6，这个问题是我将node版本升级至v12.3.4，npm至6.4.1后出现的，版本不稳定造成的 卸载12版本的node.js，重新安装稳定版本的node.js（10） 然后安装，npm install natives@1.1.6 7，执行完（npm install natives@1.1.6），就可以开始打包 npm start -----开始 8，执行打包 npm run build -----执行打包 来源： https://www.cnblogs.com/May-day/p/11000031.html

1:安装插件 在命令行中定位到根目录 安装全局 Gulp npm install -g gulp 安装项目中使用的 Gulp npm install --save-dev gulp 安装 Gulp 上 Babel 的插件 npm install --save-dev gulp-babel 安装 Babel 上将 ES6 转换成 ES5 的插件 npm install --save-dev babel-preset-es2015 安装 Gulp 上 uglify 压缩插件 npm install --save-dev gulp-uglify 2.Gulp配置 在项目根目录新建 .babelrc ，内容为： { "presets": ["es2015"] } 在项目根目录新建 gulpfile.js，内容为： 　　var gulp = require('gulp'); 　　var babel = require('gulp-babel'); 　　gulp.task("toes5", function () { 　　return gulp.src("src/js/**/*.js")// ES6 源码存放的路径 　　　　 .pipe(babel()) 　　　　 .pipe(gulp.dest("dist")); //转换成 ES5 存放的路径 }); gulp.task('auto'