gulp

修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题，最终算是搭建了一套比较完整的解决方案，接下来这篇文章以一个实际项目为例子，讲解多页面项目中如何利用gulp和webpack进行工程化构建。本文是自己的实践经验，所以有些解决方案并不是最优的，仍在探索优化中。所以有什么错误疏漏请随时指出。 使用gulp过程中的一些问题，我已经在另外一篇文章讲到了 grunt or gulp 前言 现在为什么又整了一个webpack进来呢？ 我们知道webpack近来都比较火，那他火的原因是什么，有什么特别屌的功能吗？带着这些疑问，继续看下去。 在使用gulp进行项目构建的时候，我们一开始的策略是将所有js打包为一个文件，所有css打包为一个文件。然后每个页面都将只加载一个js和一个css,也就是我们通常所说的 ==all in one== 打包模式。这样做的目的就是减少http请求。这个方案对于简单的前端项目来说的是一个万金油。因为通常页面依赖的js,css并不会太大，通过压缩和gzip等方法更加减小了文件的体积。在项目最开始的一段时间内（几个月甚至更长），一个前端团队都能通过这种办法达到以不变应万变的效果。 然而，作为一个有追求（爱折腾）的前端，难道就满足于此吗？ 妈妈说我不仅要请求合并，还要按需加载，我要模块化开发

步骤: 安装依赖：npm i browser-sync --save-dev 导入browser-sync,通过create创建 设置Sass和Js任务，将其压缩重命名并引入页面，任务结束时reload服务 设置默认任务，此任务负责，初始化服务器，监视setJs和setCss的变化 var gulp = require("gulp"); var browser = require("browser-sync").create(); var concat = require("gulp-concat"); var rename = require("gulp-rename"); var sass = require("gulp-sass"); var minifyCss = require("gulp-minify-css"); var uglify = require("gulp-uglify"); gulp.task("setJs",()=>{ gulp.src("./src/js/*.js") .pipe(concat("c.js")) .pipe(uglify()) .pipe(rename("c.min.js")) .pipe(gulp.dest("./dist")) .on("end",browser.reload); }); gulp.task("setSass",()

//新版gulp都是异步 每个任务都要return //gulp可以定义一个默认任务。涉及导出 暴露任务（任务包括两大类 私有和公有） //执行任务两种方式 series串行任务 parallel并行任务 可以嵌入 需要导入 //commonjs dest目标 series串行任务 parallel并行任务 watch 监听事件（这边改，那边就改） // commonjs const path = require(‘path’) //引入path node自带方法 不用安装 const { src, watch, dest, series, parallel } = require(‘gulp’)//解构赋值 把要用的方法解构出来单独使用 安装gulp / npm i gulp const connect = require(‘gulp-connect’)//引入方法 安装gulp-connect / npm i gulp-connect --save-dev /gulp插件运行web服务器 const sass = require(‘gulp-sass’)//引入方法 安装gulp-sass node-sass /npm i gulp-sass node-sass --save-dev /编译sass const webpack = require(‘webpack-stream

推荐使用 gulp-rev + gulp-rev-collector 是比较方便的方法，结果如下: "/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.example.dot/img/image-35c3af8134.gif" 但是由于公司发布系统限制，如果用上面方法实现，每次更新都会积压过多过期无用的文件，我们预期效果是: "/css/style.css" => "/dist/css/style.css?v=1d87bebe" "/js/script1.js" => "/dist/script1.js?v=61e0be79" "cdn/image.gif" => "//cdn8.example.dot/img/image.gif?v=35c3af8134" 怎么破?改上面两个Gulp插件是最高效的方法了。 安装Gulp npm install --save-dev gulp 分别安装gulp-rev、gulp-rev-collerctor npm install --save-dev gulp-rev npm install --save-dev gulp-rev-collector

网址：https://www.gulpjs.com.cn/ 一、Gulp简介 gulp是前端开发过程中自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；gulp是基于Nodejs的。 Gulp能完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。 在实现上，Gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。 gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。 二、Gulp环境搭建 1、安装nodejs 1）、说明：gulp是基于nodejs，理所当然需要安装nodejs；nodejs官网（https://nodejs.org/en/） 2）、测试： 按window + r 输入cmd回车， 然后输入node -v 然后输入npm -v 如果都能打印出相应版本信息，那么说明你配置成功了；如果提示“不是内部或者外部命令”，那就需要配置环境变量。 https://blog.csdn.net/jiang7701037/article/details

前两篇文章讨论了 Gulp 的安装部署及基本概念，借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务。本文主要汇总常用的 Gulp 插件及其基本使用，需要读者对 Gulp 有一个基本的了解。如果你对 Gulp 还不是很了解，可以通过下面两篇文章快速了解 Gulp 。 由于几乎所有的插件都有非常友好的使用文档，所以本文不讨论涉及插件使用的东西，仅是一个汇总、排名不分先后。 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案（一） 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案（二） 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三） 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四） 插件安装 gulp 插件基于 nodejs ，安装一个Gulp 插件和安装普通 Nodejs 包的方法是一样的。只需 $npm --save-dev install 插件名 就可以完成安装。 1、gulp-sass 预编译 sass 文件为 css 文件，SASS 不多说，如果项目中有使用 sass ，那么这个插件应该是必备的。前面的一篇文章中，已经对该插件有所使用了，可配置编译后输出风格、是否输出sourcemap 等常用选项。类似的项目还有 gulp-scss /