gulp本地版本和全局版本 解决方法： gulp4.0.0更新变动较大，可以考虑把本地版本和全局版本都切回3.9.1版本。...也有其他解决方法，详见参考文章2. npm install --save-dev gulp@3.9.1 npm install -g gulp@3.9.1 参考文章： gulp和gulp-cli的区别...Gulp error: gulp.hasTask is not a function Mismatch in gulp local and CLI versions 2. gulp-uglify压缩js...报错提供的行号不一定准确，只能自己找到使用ES6语法的位置，改成ES5。 解决方法： 把ES6代码替换成ES5代码。...： 遇到html压缩时的解析错误，此处是因为小于号<引起的。
为什么要使用Gulp 在前端开发中通常需要做，预处理语言的编译、js文件的压缩、css文件的压缩、图片的压缩等一系列工作，而使用Gulp可以自动化的完成这些工作，从而提高网站的开发效率，在我的博客使用Less...; }); 8.使用gulp 打开命令行，并且在命令行中执行gulp say命令，可以看到在控制台中输出了一句”say hello”表示Gulp安装成功 使用Gulp实现一个文件拷贝任务 下面的操作都是在项目中安装了...', function() { //获取src目录下的index.html文件 gulp.src('src/index.html') //将index.html拷贝到dist...('gulp'); //文件拷贝任务 gulp.task('copy', function() { //获取src目录下的index.html文件 gulp.src('src/index.html...文件夹下的index.html中 使用Gulp自动将Less编译成CSS 下面的操作都是在项目中安装了Gulp的情况下进行的，没有安装Gulp可以看前面的Gulp的安装与使用中的内容 1.安装gulp-less
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。...1.基本使用 npm i gulp-cli -g npm i gulp -D cnpm i gulp gulp-uglify gulp-concat 2.创建文件gulpfile.js键入如下 const...sourcemap保留了之前编译的代码使代码容易调试，当出错时浏览器会通过sorcemap恢复源代码并定位错误 cnpm i gulp-sourcemaps -D const gulp = require...0134256u6i") Datw.style.backgroundColor='red' 我们的代码并没有Text元素，但打包时不会报错 当html引入打包后的js文件时 图片 图片 直接定位了错误信息...，方便调试 不过使用这个功能必须打开谷歌浏览器的Enable Javascript source maps 图片 css cnpm i gulp-cssmin -D const gulp = require
首先，gulp的源码里没有任何一部分是定义pipe的。 gulp的pipe方法是来自nodejs stream API的。 gulp本身是由一系列vinyl模块组织起来的。...pipe跟他字面意思一样只是一个管道 例如我有一堆文件 var s = gulp.src(["fileA","fileB","fileC"]) src方法实际上是'vinyl-fs'模块的方法,选择一系列文件并创建可读流...方法只负责返回这个管道结构（Stream对象） 楼主想要窥探管道里的内容，就要创建一个Stream对象，在Stream对象接收结果的方法里把流里的内容log出来即可 Stream与File 注意的是gulp...里的流的file必须是vinyl对象 var File = require("gulp-utils").File //或者 var File = require("vinyl") var myf =
引言 gulp是用于前端自动化构建的，方便前端进行即时开发的工具 自动化构建所需的插件 在项目路径下使用 npm init初始化之后，将下面需要安装的依赖复制到package.json文件中 "devDependencies...在复制到package.json文件中后，使用npm install命令，npm会下载devDependencies中对应版本号的依赖文件，这里只是完成了本地的安装，此时如果运行 gulp命令可能会报一些错误...， 大概率是因为没有安装对应全局的插件，或者本地安装的插件和全局安装的版本号不一致 如果没有安装对应全局和本地的插件，则使用命令安装(以版本号2.24.4的browser-sync为例) npm install...监听任务 依赖包引用 var gulp=require('gulp'); var cssnano=require('gulp-cssnano'); var rename=require('gulp-rename...':"./" } }); }); //创建一个默认的任务 gulp.task('default',['bs','watch']); 使用gulp命令开启default默认任务之后，此时更改src
这个文件保存项目的相关信息 第二: npm install gulp -g 安装全局gulp 然后在项目里的根目录再安装一遍 npm install gulp –save-dev 第三: 新建一个gulpfile.js...文件 然后安装js代码检测插件，压缩文件插件，重名名插件(这里只讲一下这三个插件的使用，当然gulp还有很多强大的插件) js代码检测插件： npm install gulp-jslint –save-dev...压缩文件插件： npm install gulp-uglify –save-dev 重名名插件： npm install gulp-rename –save-dev 再安装一下npm install...jslint 然后在gulpfile.js文件里面编写gulp任务代码 var gulp = require("gulp"), jshint = require("gulp-jshint"),...uglify = require("gulp-uglify"), rename = require("gulp-rename"); gulp.task("scripts",function
@4 => 安装成功检测版本号, gulp cli 2.3.0 gulp 全局工具安装完毕 能给你的电脑提供一个启动 gulp 的环境 私人: 可以再 cmd 里面运行 gulp xxx 的指令 准备使用...准备使用 gulp + 作用: 帮我们打包自己的项目 1....全局依赖环境 gulp + 一台电脑安装一次, 以后使用就可以了 + 再命令行提供 gulp xxx 的能力 + 指令 $ npm install --global gulp...常用Api gulp 的常用 API + 前提: 下载 gulp 第三方, 导入以后使用 1. gulp.task() => 语法: gulp.task(任务名称, 任务处理函数) =>...> gulp-babel 的版本 -> gulp-babel@7: 大部分使用再 gulp@3 里面 -> gulp-babel@8: 大部分使用再 gulp@4 里面 => 下载:
在使用新的 gulp-cli 之前，执行命令 npm rm --global gulp ，将之前的全局 gulp 卸掉。...首先获取到需要的 stream ，然后可以通过 stream 的 pipe() 方法把流导入到你想要的地方，比如 gulp 的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中...再回到正题上来，gulp.src() 方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流（Vinyl files），这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息...// 使用数组的方式来匹配多种文件 gulp.src(['js/*.js','css/*.css','*.html']) 使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上...适用于任务就是操作 gulp.src 获取到的流的情况。
在gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方，比如gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中...gulp的使用流程一般是：首先通过gulp.src()方法获取到想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest(...例如： var gulp = require('gulp'); gulp.src('script/jquery.js') // 获取流的api .pipe(gulp.dest('dist/foo.js'...gulp内部使用了node-glob模块来实现其文件匹配功能。...var gulp = require('gulp'); gulp.src('script/jquery.js') // 获取流 .pipe(gulp.dest('dist/foo.js')); //
Gulp是什么 Gulp是一个用于对静态Web资源进行打包的工具，可以实现对静态资源的压缩，本质上是一个npm模块。 在正式使用Gulp之前，需要先安装并配置好Node.js环境。...: 4.0.2 如何使用Gulp Gulp是一个流式构建工具，具体要执行的任务可以在项目根目录下新建一个名叫“gulpfile.js”的文件，并在其中进行配置。...在项目根目录下安装对应插件： # 使用gulp-uglify压缩js npm install --save-dev gulp-uglify # 使用gulp-clean-css压缩css npm install...--save-dev gulp-clean-css # 使用gulp-smushit压缩图片 npm install --save-dev gulp-smushit # 使用gulp-htmlmin压缩...使用gulp压缩CSS https://blog.csdn.net/weixin_45195200/article/details/115459128 Gulp 使用gulp压缩图片 https:
windows是命令提示符（window + r 输入cmd回车） 3、使用npm（nodejs的包管理器），或选装cnpm执行npm install cnpm -g --registry=https:...（如第五步配置完成，此步忽略） npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint...gulp-uglify gulp-imagemin gulp-rename gulp-concat gulp-htmlmin gulp-notify gulp-cache gulp-livereload...2 * gulp 3 * $ npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint...gulp-uglify gulp-imagemin gulp-rename gulp-concat gulp-htmlmin gulp-notify gulp-cache gulp-livereload
的使用文档 gulp-fontmin 写在最前 gulp能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括css、js、html乃至各类格式的图片文件。...（图片文件的压缩往往只能节省几十KB，效果远远不如imagine、tinypng等压缩方式，所以此处不再写使用gulp压缩图片的内容）。...但使用上各有利弊。考虑到目前的浏览器市场占有率，更加建议各位使用 terser 来压缩 js。 方案一：为了适配绝大多数浏览器（IE：就是老子），可以将 ES6 语法降为 ES5 语法。...则使用gulp-babel，这一方案在压缩部分使用了 ES6 的 js 以后，由于强制降级导致变量生命周期的变动，会引发一系列迷之 bug，需要手动再去添加屏蔽项以选择不压缩对应的 js。...（更加推荐）：gulp-terser只会直接压缩 js 代码，所以不存在因为语法变动导致的错误 。
配置教程 安装gulp插件 npm install --global gulp-cli #全局安装gulp指令集 npm install gulp --save #安装gulp插件 安装各个下属插件以实现对各类静态资源的压缩...npm install gulp-htmlclean --save-dev npm install gulp-html-minifier-terser --save-dev # 用gulp-html-minifier-terser...压缩js npm install gulp-fontmin --save-dev # 压缩字体包 为Gulp创建gulpfile.js任务脚本。...= require('gulp-htmlclean'); var fontmin = require('gulp-fontmin'); var uglify = require('gulp-uglify...') var babel = require('gulp-babel') //压缩js gulp.task('compress', async() => gulp.src(['.
Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1： const gulp = require('gulp'); const...babel = require('gulp-babel'); gulp.task('default', () => { return gulp.src('src/app.js') .pipe...(babel({ presets: ['es2015'] })) .pipe(gulp.dest('dist')); }); 用法2： 在项目根路径创建文件 .babelrc。...内容为 { "presets": ["es2015"] } 再 var gulp = require("gulp"); var babel = require("gulp-babel"); gulp.task....pipe(gulp.dest("dist")); // 转换成 ES5 存放的路径 }); 参考文献： gulp-babel 将 ES6 代码转换成 ES5
gulp gulp是基于流的前端构件化工具。gulp是自动化项目的构建利器；不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。同时使用非常简单，学习成本低。...npm install -g gulp 安装成功后就可以在命令行输入gulp相关的命令了 ? 安装成功后，输入gulp -v 查看版本 ?...环境开发 vscode nodejs gulp gulp入门 npm init 项目初始化 ，此时根目录会出现package.json npm install gulp --save-dev 在本地项目局部安装...gulp 创建gulpfile.js文件 // 以下代码会执行在node环境下 var gulp = require( "gulp" ); // 创建一个gulp的任务 gulp.task( "default...使用gulp 压缩代码能使项目运行更加的流畅。 ? 最后，祝有所学习，有所成长
gulp —-项目工程化的工具 一，作用： (1) 能够完成代码的压缩 (2) 合并，复制，监听，ES6的代码转换，启动服务器等等 二，gulp 使用步骤： 搭建环境 (1)安装nodeJS...(2) 安装node的目的是为了测试npm （npm是nodeJS的包管理工具 全 称：nodeJS Package Manager） 使用npm的原因： a.如果一个项目中使用的第三方js代码非常多...，gulp提供很多接口，可以使用插件 压缩js文件，就需要 gulp-uglify 插件。...（每次改动文件都会自动拷贝和压缩） ** ② 监听文件： 使用watch 随后在cmd中输入 gulp watchall 待修改代码后则一直会监听 ④ 合并js文件 使用gulp-concat...命令行输入** gulp watchall ⑥ 压缩css 使用Gulp-minify-css 插件 在cmd命令行中输入 npm install gulp-minify-css –save-dev
在 VS 2015 中使用 Gulp 编译 TypeScript 升级到 VS2015 之后， TypeScript 文件不能自动编译成 js 文件， 要编译项目才能讲所有的 ts 文件 编译成 js...文件， 不过 VS2015 支持 Gulp ， 而 Gulp 有 TypeScript 插件， 这样使用 Gulp 自动编译 ts 文件的方法就可以实现了。...我们要把 app 目录下的 ts 文件编译到 wwwroot/app 目录下， 使用 Gulp 的做法是这样的： 1、 添加 gulp 和 gulp-typescript NPM 包 打开 package.json...= require('gulp'); var ts = require('gulp-typescript'); gulp.task('tsc', function () { gulp.src...运行一下， 果然在 wwwroot/app 目录下生成了对应的 js 文件， 前进了一大步； 3、 实现自动编译 但是每次都运行这个任务还是太麻烦了， 我们的目标是能够自动编译 ts 文件， 这就需要使用
Tips:前导必备 博主博客地址 博主使用的是yilia主题 ---- 1、全局安装gulp npm install gulp -g # 查看版本 gulp -v 2、安装gulp插件 在站点根目录下安装...npm install gulp --save npm install gulp-minify-css --save npm install gulp-uglify --save npm install...gulp-htmlmin --save npm install gulp-htmlclean --save npm install gulp-imagemin --save # 解决【Gulp打包问题...错误请执行以下语句 sudo npm i gulp-imagemin --unsafe-perms 3、创建gulpfile.js文件 在 Hexo 站点下新建gulpfile.js文件，文件内容如下...： var gulp = require('gulp'); var minifycss = require('gulp-minify-css'); var uglify = require('gulp-uglify
gulp是基于流的自动化工具,关键字:自动....我也是非常喜欢自动的东西,尤其能帮我省下好多时间,提高效率,更重要的是能提高B格; 下面就来看看如何创建; 1.cnpm init 初始化项目 2.cnpm install gulp 安装gulp ...并用gulp -v查看版本号 3.cnpm install 安装所需要的依赖包 cnpm install gulp-connect --save-dev cnpm install gulp-concat...('gulp-connect'); var uglify = require('gulp-uglify'); var concat = require('gulp-concat'); var rename...; gulp.src(htmlSrc) .pipe(gulp.dest(htmlDist)) .pipe(connect.reload()) }); gulp.task
toc AngularJS项目中js众多，上线的时候压缩合并下还是很有必要的^_^ 在此之前如果不了解gulp，推荐访问Gulp开发教程（翻译）。...的插件，因此顺理成章： var gulp = require('gulp'); var ngAnnotate = require('gulp-ng-annotate'); var gutil = require...('gulp-util'); var bower = require('bower'); var uglify = require('gulp-uglify'); var concat = require...('gulp-concat'); var minifyCss = require('gulp-minify-css'); var rename = require('gulp-rename');...'); gulp.task('minify', function() { return gulp.src(['js/appService.js','js/app.js']) //注意
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
