猿始森林

gulp按顺序执行不生效1、可能你用了gulp.start()如下，rev 会在 script 还没有执行完毕的时候就已经执行了。因为gulp.start()没有办法返回一个stream对象，也就是没法知道你什么时候执行完毕。gulp.task('script', function(){ gulp.start(['js_libs', 'js_main'])})gulp.task(...

一、编译less发生错误后，监听失效1、编写css代码时，因为有自动保存，可能一行样式还没写全，文件就保存了，这样的话 less() 编译会报错，如下：2、我们发现进程虽然没有挂掉，但是再修改css文件时，watch监听就失效了。这是因为 less() 编译导致的。解决方案如下：手动加入错误提示gulp.task('css_main', function(){ return ...

需求分析：只要是用 * 匹配的文件路径都会直接将原始路径打包到dist，而很多时候我们需要将单纯的文件打包过去就可以了。一、gulp.src 文件路径规则1、参数说明/*** options {Object}* options.base {String} 定义被替换的文件路径*/gulp.src(globs[, options])2、使用说明/*** gulp.dest...

需求分析：es6语法以及提供的强大api给前端带来了很大便利，可是部分浏览器无法识别es6语法gulp-babel只能将es6语法编译成es5，比如：箭头函数、let变量等，但是API不能编译，比如Object.assign引用babel-polyfill编译es6新增api一、IE浏览器无法识别ES6新增API这里用的是ie浏览器，chrome是可以识别es6 api的，所以...

需求分析：es6语法以及提供的强大api给前端带来了很大便利，可是部分浏览器无法识别es6语法gulp-ugilfy无法压缩es6，如果代码有使用es6的语法，则压缩会失败打包的时候，我们需要将es6编译成es5一、安装gulp-babel @babel/core @babel/preset-env模块npm i -D gulp-babel @babel/core @babel/...

需求分析：压缩html，减少文件体积，减轻服务器压力一、安装gulp-htmlmin模块npm i -D gulp-htmlmin二、gulp-htmlmin参数说明/*** @param path {String} 生成文件的路径及文件名，如：rev/manifest.josn* @param option {Object}* {* removeComments: t...

需求分析：浏览器会缓存js、css文件，所以在每次升级js或css文件之后，需要浏览器重新加载这些文件也就是我们常说的刷新缓存。所以需要在js、css文件后面加上版本号。一、版本号添加方式本文将采用第二种方式就行讲解1、改变文件名称这种方式必须同时改变资源的文件名和html里面引用的文件名，并且一一对应可以用 gulp-rev gulp-rev-collector 两...

需求说明：压缩图片并且只是压缩修改过的图片。因为压缩图片比较耗时，我们只需要压缩修改的图片，没有修改的直接从缓存中读取。

需求分析：打包时自动添加css前缀；编译css预处理；压缩css一、gulp-autoprefixer等模块安装npm i -D gulp-less gulp-autoprefixer gulp-csso二、gulp-autoprefixer等参数说明/** * @param option {Object} * @param option.browsers 浏览器类型 * @p...

需求分析：将js文件压缩成一行，减少js文件的大小。压缩过程中如果遇到js语法错误，将会报错并且压缩会被终止。所以我们需要1、在开发环境下，编写js代码时，要监听并检查js文件的语法，避免语法错误导致最后生产环境打包压缩js时失败的问题2、在生产环境时，压缩js时保证没有语法错误，或者说提供检查语法错误的task，以方便检查错误一、安装gulp-uglify和pump模块说明：使用p...

需求分析：多页面应用，html模板的meta、link、title、script都有通用的部分，包括header和footer。那么，  1、如何提取通用部分，如何引用；  2、如何处理不同的部分（比如部分页面需要单独引用文件）。一、安装gulp-html-tpl、art-template模块说明：gulp-html-tpl配置的时候需要使用art-template进行数据渲染 ...

说明：我们需要对不同的环境（开发环境、生产环境）对文件进行不同的处理。至于原因，前面文章中阐述过了，这里就不多做说明。一、gulp设置环境变量，并生成env.js文件1、设置环境变量，是用于执行gulp任务时的判断2、生成env.js文件，是用于开发页面时，判断环境 var fs = require('fs'); var env = 'dev'; // 用于执行gu...

一、gulp.task()说明1、gulp任务是异步运行的，默认将并行运行所有任务；任务中的步骤也是异步的，因此各个步骤也是并行的。2、我们的任务需要依次逐个执行，前面的文章有提到过这种需求，比如：刷新浏览器，包括后续要讲到的的生成版本号的任务都需要在其他任务执行完毕之后，再执行。3、解决：引入run-sequence模块。二、安装run-sequence npm i -D run...

一、gulp.watch()功能介绍举例说明：当’./src/*.html’发生变化时，执行’html’任务，同时刷新浏览器。如下： gulp.task('watch', function(){ gulp.watch('./src/*.html', ['html']).on('change', browserSync.reload); });二、gulp....

一、安装browser-sync模块 npm i -D browser-sync二、引入browser-sync模块，并初始化 var browserSync = require('browser-sync').create(); gulp.task('browser', function(){ browserSync.init({ ...

一、创建package.json文件npm init // 一路回车就行（默认已安装node）package.json内容如下: { "name": "gulp-project", "version": &a