gulp编译less
A. 用gulp让less实时转生成的css怎样引入html文件不生效
可能存在的原因：
css的引用路径是否准确（浏览器打开HTML文件，然后右键查看源码，点下引入的css，看看能不能打开），能则下一步。
less编译的css存放路径是否准确。生成之后，看下前后两次生成的css文件是否有变化。有则往下分析；
要想效果实时生效，需要浏览器能自动刷新或者自动加载，这是必要，不然即使less能自动化编译，但如果浏览器不能自动刷新或者自动加载，那效果也是不能实时改变的。目前能实现浏览器页面自动刷新的gulp插件有：gulp-connect，不知道你用进去了没，没用的可以试试？
gulp-connect 配置问题或者浏览器livereload插件没有工作。如果确定配置没问题，可以在命令行窗口按Ctrl+C停掉gulp任务，然后重新运行gulp任务就好。
ps:还不行的话，建议把gulpfile.js源码发来大家看看找出原因。
B. 为什么修改代码之后 gulp build就会恢复到没修改之前的代码呢
这个原因可能是因为这个school.css是由css预处理器编译出来的，你看看是不是有叫school.less或者school.scss这种类似的文件，去修改这里面对应的图片路径，不然你只修改css文件是没用的，编译后会被覆盖掉
C. 前端构建工具Gulp.js 你知多少..(webpack/gulp/grunt)
@ TOC
阅读本文章之前，相信你已经对前端构建工具(webpack、gulp、grunt)有一定的认知和了解了，那么他们之间究竟有什么区别呢？
gulp文档上面有这么一句话 ，也就是说 gulp是一个自动化构建工具；
gulp的一些功能如下(包括但不限于):
其实Webpack和另外两个并没有太多的可比性
傻瓜式起步照搬官网文档
1.安装
2.在项目根目录下创建一个名为 gulpfile.js 的文件：
3.运行 gulp：
默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
具体详情可以查看 gulpjs.com文档
新建一个项目gulp-test
环境:
1.新建文件以下文件如下
其中 gulpfile.js 是我们gulp的配置文件，启动gulp默认会找个这个文件并执行；
2.接下来安装依赖
一直按回车Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁琐的enter步骤)
此时我们的目录结构是这样了
安装依赖
这里页面实时刷新只讲这个 gulp-connect ，其他详情可以参照 Browsersync 和文章 gulp-livereload
安装完依赖后配置gulpfile.js如下:
大概讲解一下gulpfile.js:
gulp.task 是gulp的api 定义一个使用 Orchestrator 实现的任务（task）
如上我们定义了 my-task-js ， my-task-css ， html ， clean ， default ， watch ， server 等任务，其中:
my-task-js 是将 符合所提供的匹配模式的js 进行检测(gulp-jshint)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/js目录下；
my-task-css 是将 符合所提供的匹配模式的sass进行编译(gulp-sass)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/css目录下；
html 是将 符合所提供的匹配模式的html进行监听，如果有变化则connect.reload()
clean 是如果任务重新启动时 删除旧文件；
default gulp默认启动的任务
watch gulp的api 监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。
server 依赖gulp-connect启动一个服务器
配置完gulpfile.js之后，我们给js和css及html加点东西:
首先js/helloworld.js
css/index.scss
index.html
运行gulp
浏览器效果:
接下来我们修改helloworld.js来看看是否能实时刷新
修改如下:
按保存之后，终端给我们报了一个错:
查看js发现我们用了es6语法的声明语句 但当前gulp无法处理es6语法，有问题解决问题，es6=>es5
解决方案:
安装gulp-babel babel-core babel-preset-es2015
gulpfile.js修改如下:
运行
依然报上面的错；找了一些原因发现，虽然安装了相关依赖，却没有配置.babelrc文件，即babel还没转化es6
根目录添加.babelrc文件
重新运行:
查看dist下的js文件
改变helloworld.js检查页面是否刷新
保存，页面的天空蓝换成你们喜欢的yellow颜色
修改index.scss 查看是否会刷新页面
最后修改index.html 查看是否会刷新页面
今天主要学习了gulp的简单项目搭建及实时更新配置；其实gulp类似于grunt的弱化版，但更简单好用，只是插件会少一些，目前主流的项目搭建工具主要是webpack，但依然有不少项目还用着gulp或者grunt
扩展:
下面还有一些楼主的学习笔记:
有兴趣的可以多多交流@ 楼主博客
D. 璇烽梾gulp鍜寃ebpack镄勫尯鍒
1銆乬ulp鏄宸ュ叿阈俱佹瀯寤哄伐鍏枫傚彲浠ラ厤钖埚悇绉嶆彃浠跺仛jps.铡嬬缉锛宑ss.铡嬬缉锛宭ess缂栬疟绛夛纴鍙浠ユ浛浠ｆ坠宸ュ疄鐜拌嚜锷ㄥ寲宸ヤ綔銆
2銆佽寃ebpack鏄鏂囦欢镓揿寘宸ュ叿锛屽彲浠ユ妸椤圭洰镄勫悇绉峧ps.鏂囥乧ss.鏂囦欢绛夋墦鍖呭悎骞舵垚涓涓鎴栧氢釜鏂囦欢锛屼富瑕佺敤浜庢ā鍧楀寲鏂规堬纴棰勭紪璇戞ā鍧楃殑鏂规堛
3銆佸湪瀹氢箟鍜屼娇鐢ㄧ被姣斾腑涓よ呴兘链夊悇镄勭敤阃旓纴钖屾椂webpack涓哄埯绾х紪璇戠▼搴忥纴gulp涓洪珮绾х紪璇戠▼搴忥纴鍦ㄥ姛鑳戒笂瑕佹瘆webpack搴旂敤绋嫔簭涓澶氥
4銆亀ebpack鍙浠ュ緢鏂逛究浣跨敤node_mole銆乪s6鎴栬呮牱寮忔敞鍏ョ瓑锷熻兘锛屼綔涓烘渶鍒濈骇镄勫姛鑳藉畾浣嶆т环姣旀渶楂桡纴webpack杈揿叆杈揿嚭閮戒互js涓轰富锛屽筯tml鍏奸【杈冨皯锛屽彲鐢ㄧ粍浠朵笉澶氩緢闅捐揪鍒板彲鐢ㄧ殑绋嫔害銆
5銆乬ulp鍦ㄧ紪绋嬫柟闱㈣缉涓哄嶆潅锛屼絾鏄鍙鐢ㄧ殑缁勪欢涔熶细镟村氾纴镓嫔姩缂栬疟镄勬儏鍐典笅钥楁椂杈冮暱锛屽悓镞舵よ蒋浠朵笉阃傚悎鍒濈骇鍏ラ棬钥呬娇鐢ㄣ
璧勬枡𨰾揿𪾢锛欢ulp鍜寃ebpack鍙浠ョ粍钖堣捣𨱒ヤ娇鐢锛岃揪鍒板揩阃熺紪璇戠殑鐩镄勶纴渚濋潬gulp涓板瘜镄勭粍浠跺彲浠ュ緢濂藉湴璁﹋s鍜宧tml镵斿姩閰岖疆锛岃繘钥屾带鍒秝ebpack搴旂敤绋嫔簭锛屽疄鐜伴珮镊锷ㄥ寲銆
镟村氩叧浜巊ulp鍜寃ebpack镄勫尯鍒锛岃繘鍏ワ细https://www.abcgonglue.com/ask/1105281615983280.html?zd镆ョ湅镟村氩唴瀹