gulp

• gulp 是一个前端构建工具
• gulp 安装在全局环境中，配置环境变量NODE_PATH,可以从全局环境中引入gulp
• gulp.src 方法第二个参数是对象类型
• gulp 默认执行的任务是 default

gulp是前端开发过程中对代码进行自动化构建的利器

1. npm root -g 查看全局安装包路径
2. gulp
3. gulp-concat 合并文件
4. gulp-rev 静态资源缓存与更新
5. gulp-rev-collector 防止文件缓存
6. gulp-mock-server mock数据时构建本地服务
7. gulp-rename
8. gulp-uglify
9. gulp-minify-css
10. gulp-minify-html
11. gulp-imagemin
12. gulp-sass
13. gulp-less
14. gulp-webserver 开启服务
15. gulp-livereload 实时刷新
16. run-sequence 资源实时刷新
17. gulp-connect 开启服务
18. http-proxy-middleware 代理中间件
19. gulp-babel@7 es6编译
20. gulp-core
21. gulp-preset-es2015

• 起服务，自动打开浏览器，端口号配置成8686，自动刷新浏览器

gulp.task("webserver",() => {
	gulp.src("./src/")  自动起服务的路径
		.pipe(webserver({
			open:true, 自动打开默认浏览器
			host:"localhost",
			port:8686 端口号,
			livereload:true 自动刷新
	}))
})

• 编译 scss

gulp.task("scss", () => {
    return gulp.src("./src/public/stylesheets/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("./src/public/stylesheets/"))
})
html 引编译后的 css 样式，监听引编译时的路径，监听编译的任务

• 编译 js
  • 必须下载 gulp-babel@7 版本的
    • 如果下载8.0.0版本的，会报错
      
  • 必须下载 gulp-core 和 gulp-preset-es2015
  • 必须 gulp name 单独运行

gulp.task("babelJs", () => {
    gulp.src("./src/public/javascripts/*.js")  需要编译的 js 路径
        .pipe(babel({
            presets: "es2015"   
        }))
        .pipe(gulp.dest("./src/dist/javascripts/"))    编译后的 js 路径
})

• 压缩 css

gulp.task("minicss", () => {
    return gulp.src("./src/public/stylesheets/*.css")
        .pipe(css())
        .pipe(gulp.dest("dist/stylesheets"))
})

• 压缩 js

gulp.task("minijs", () => {
    return gulp.src("./src/public/javascripts/jquery-3.3.1.js")
        .pipe(script())
        .pipe(concat("main.min.js"))
        .pipe(gulp.dest("dist/javascripts/"))
})

• 监听文件变更

gulp.task("watch",() => {
	gulp.watch("./src/public/stylesheets/scss/*.scss",gulp.series("sass"))
})

• 开发 ---- 编译，监听

gulp.task("dev",gulp.series("sass","webserver","watch"))

• 打包上线 ---- 压缩

gulp.task("build", gulp.parallel("minicss", "minijs"))