引言 gulp是用于前端自动化构建的，方便前端进行即时开发的工具 自动化构建所需的插件 在项目路径下使用 npm init初始化之后，将下面需要安装的依赖复制到package.json文件中 "devDependencies...在复制到package.json文件中后，使用npm install命令，npm会下载devDependencies中对应版本号的依赖文件，这里只是完成了本地的安装，此时如果运行 gulp命令可能会报一些错误...， 大概率是因为没有安装对应全局的插件，或者本地安装的插件和全局安装的版本号不一致 如果没有安装对应全局和本地的插件，则使用命令安装(以版本号2.24.4的browser-sync为例) npm install...()); }); //监听处理css的任务 gulp.task('css',function(){ gulp.src(paths.css+"*.scss") .pipe(sass().on('error...':"./" } }); }); //创建一个默认的任务 gulp.task('default',['bs','watch']); 使用gulp命令开启default默认任务之后，此时更改src
('images-min',['image-min','image-min2','image-min3'],function() {}) //监听两个文件的文件变化 gulp.task('listenPages...，但是依然会报错，gulp命令可以直接运行，就是配置项中的几个模块无法执行。...我是后端开发，前端的知识也就是马马虎虎，所以这个问题确实难倒我了，差不多在网上查资料然后改代码弄了一个小时，依然没有解决。...后来又看了一下报错，既然缺少模块，是不是我没有安装啊，这样一想，再去查构建目录，果然是没有安装这些模块，我以为安装gulp后就完事儿了的。...根据gulpfile.js配置项中需要的模块依次安装gulp-clone、gulp-htmlmin、gulp-uglify等模块即可。 执行任务正常
说到 gulp 的运作方式，就不得不提到 vinyl 和 Node.js 的 stream。...vinyl vinyl 是 gulp 所使用的虚拟的文件格式，在它的自述文件是这么说的：“当提到文件时你首先想到的是什么？...再回到 gulp，还记得之前说过 src 是回传一个 stream 吗？....>> 没错，这就是 Vinyl 的文件，gulp 用 stream 的对象模式在传输这些文件，plugin 其实上就是回传一个 Transform 的 stream（Node.js 中 stream...这样转来转去的效率太低了。 剩下的部分就是 gulp 处理任务的注册与依赖性的逻辑了，依赖性主要是由 undertaker 处理的，不过我觉得这里没什么特别的东西，所以有兴趣就自己去看看吧。
--save-dev（根据package.json的配置，安装组件到项目） 若忽略第五步，则这里只执行：(c)npm install gulp --save-dev（仅安装gulp到项目） 7、...安装需要的gulp组件（绿色部分为需要安装的组件）另sass编译需提前安装ruby。...gulp.src('style/**/*.scss')//表示css及子文件夹中的所以文件 24 .pipe(sass()) 25 .pipe(autoprefixer...的位置 29 // 'pathToSpriteSheetFromCSS': '.....gulp.src('css/*.css') 41 // .pipe(spriter({ 42 // // 生成的spriter的位置 43 //
2. gulp + browserify /** * File Name: gulpfile.js */ // 引入 gulp var gulp = require('gulp'); //...'); var notify = require('gulp-notify'); // 把src/script下的所有coffee逐个编译为js, 放在temp/script下 gulp.task('...})); }) // 监视文件的变化 gulp.task('watch', ['coffee', 'browserify', 'stylus'], function(){ gulp.watch('...// 保证在当前项目目录下曾经运行过： // npm install gulp-jshint gulp-concat gulp-uglify gulp-rename gulp-babel babel-preset-es2015.../js/*.js') // .pipe(jshint()) // .pipe(jshint.reporter('default')); // }); // 监视文件的变化 gulp.task(
Gulp 前端自动化构建工具 中，已经对 Gulp 有了初步的了解，我们通过将所有任务写到 gulpfile.js 文件中进行编译，这当然是最直观的方法，但当我们需要执行的任务过多时，gulpfile.js...watch 任务里的具体代码 // watch.js const gulp = require('gulp'), config = require('../.....base64 任务 图片 图片 imagemin 插件，将目录下的所有 jpg ,png 格式的图片进行压缩，我们还利用了 gulp-cache 插件，该插件的作用是代理 Gulp 的缓存，所以我们通过利用缓存...，保存已经压缩过的图片，以保证只有新建或者修改过的图片才会被压缩，最后通过 gulp-size 显示压缩过后的图片大小 // optimize-images.js const gulp = require...，而 vinyl-source-stream 把普通的 Node Stream 转换为 Vinyl File Object Stream，我们在之前的文章有提到过，Gulp 使用的 Stream 并不是普通的
前不久，处理生信分析网页版自动化报告的时候就使用过 fancybox，今天在优化个人博客，为博文增加图片缩放效果，解决一些滚动条问题时，才从 fancybox 的 Github 源码中接触到 gulp...small_1.jpg"> 3. fancybox 的一些问题...在网上看到部分网友说，fancybox3 在打开或关闭遮罩层的时候，页面会自动返回顶部的 bug，目前我使用的 fancybox@3.5.7 暂时没发现这个问题。...gulp 的一个基本的项目结构，而这边的 src 文件就是我们的源文件，dist 是通过 gulp 编译过后的文件（稍后会详细说明每一个文件的作用）。...现在请大家思考这样一个问题倘若我让线上的网站（不论 PC 还是移动端）使用的 css 文件，JS 文件，images 文件等静态资源，JS 是压缩过的，css 是压缩过的，images（主要针对雪碧图）
前不久，处理生信分析的网页版自动化报告时候就使用过 fancybox，今天在优化个人博客，为博文增加图片缩放效果，解决一些滚动条问题时，才从 fancybox 的 Github 源码中接触到 gulp...small_1.jpg"> fancybox 的一些问题...在网上看到部分网友说，fancybox3 在打开或关闭遮罩层的时候，页面会自动返回顶部的 bug，目前我使用的 fancybox@3.5.7 暂时没发现这个问题。...大家现在看到的这个图片是我使用 gulp 的一个基本的项目结构，而这边的 src 文件就是我们的源文件，dist 是通过 gulp 编译过后的文件（稍后会详细说明每一个文件的作用）。...现在请大家思考这样一个问题 倘若我让线上的网站（不论 PC 还是移动端）使用的 css 文件，JS 文件，images 文件等静态资源，JS 是压缩过的，css 是压缩过的，images（主要针对雪碧图
/typings", "....接着我们将模块导入改成 TypeScript 的 import，这里共有4种写法，分别讲一下需要注意的问题。...解决了 import 问题，其实问题就解决一大半了，确保了你编译后的文件引入的模块不会出现 undefined。...比如你安装了 gulp@3 的版本，就不要安装 gulp@4 的 @types/gulp 极少情况，第三方包内既没有声明文件，对应的@types/mod包也没有，此时为了解决报错，只能自己给第三方包添加声明文件了...我们将声明文件补充到typings文件夹中，以包名作为子目录名，最简单的写法如下，这样 IDE 和 TypeScript 编译便不会报错了。
大家好，又见面了，我是你们的朋友全栈君。...2、Auto Close Tag 自动闭合HTML标签 4、Beautiful 格式化代码的工具 5、Dash Dash是 MacOS 的 API 文档浏览器和代码段管理器 6、Ejs Snippets...ejs 代码提示 7、ESLint 检查 javascript 语法错误与提示 8、File Navigator 快速查找文件 9、Git History (git log) 查看 git log 10、Gulp...Snippets 写 gulp 使用到，gulp 语法提示。...26、Stylelint css/sass 代码审查 27、Typings auto installer 安装 vscode 的代码提示依赖库，基于 typtings 的 28、View In Browser
2、Auto Close Tag 自动闭合HTML标签 4、Beautiful 格式化代码的工具 5、Dash Dash是 MacOS 的 API 文档浏览器和代码段管理器 6、Ejs Snippets...代码提示 7、ESLint 检查 javascript 语法错误与提示 8、File Navigator 快速查找文件 9、Git History (git log) 查看 git log 10、Gulp...Snippets 写 gulp 时用到，gulp 语法提示。...、One Dark Theme 一个vs code的主题 21、Path Intellisense 自动路径补全、默认不带这个功能 22、Project Manager 多个项目之间快速切换的工具 23...26、Stylelint css/sass 代码审查 27、Typings auto installer 安装 vscode 的代码提示依赖库，基于 typtings 的 28、View In
webpack已经成为了前端打包构建的主流，但是一些`老古董`的项目还是存在的，也有优化的必要，正好公司的老项目需要优化，不多说拿gulp实践一下。...你的项目目录关系到你的gulp脚本里的任务路径，我脚本里写的是匹配所有的目录和文件。我简单举个例子：这里js/common里的js文件也会被处理。如果只想处理特定目录的文件，请修改任务里的路径。...具体关于路径的写法，可以去看gulp官网的api：https://www.gulpjs.com.cn/docs/api/ gulp-minify-css这个官网提示已经弃用，改用gulp-clean-css...，这里保留只是为了告诉大家，效果一样，用户一致，为了保证项目不出问题，还是用最新的吧。...，在有时候我们需要同步执行任务，比如：先编译less,在对编译好的css进行压缩，这个时候异步就有问题了。
gulp的包。...gulp.src告诉Gulp任务，所要使用的文件。gulp.dest`告知当任务完成后，Gulp输出文件的地址。 让我们来尝试构造一个真实的任务，将Sass文件编译成CSS文件。...但是问题是，有什么可以让我们不用每次都手动运行gulp sass，将Sass编译成CSS？ 监视Sass文件更改 Gulp提供我们一个watch方法，监视是否有文件更改。...开发者面对一个问题是，当自动化运行这个进程时，很难将你的脚本串联成正确的顺序。...这将很难使用传统的插件（比如gulp-concatenate）来链接他们。 很感激，这儿有一个有用的Gulp插件，gulp-useref解决了这个问题。
gulp 是一个流行的 JavaScript 流的构建工具，可以帮助我们自动化这个过程， 相比webpack， 我个人觉得gulp是一个较为轻量的打包工具了。...本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。安装 gulp在开始之前，请确保已经安装了 Node.js，这里不介绍如何安装node。...然后，可以使用以下命令在全局围内安装 gulp：npm install -g gulp创建项目目录在本地磁盘上创建一个新的文件夹，例如 my-project，然后在其中创建以下文件：my-project...及其所需的依赖：npm install --save-dev gulp gulp-cssmin gulp-uglify browser-sync编写 Gulp 文件const gulp = require...打包静态文件当您想要生成静态文件时，可以运行以下命令：gulp dist该命令将创建一个名为 dist 的文件夹，其中包含压缩后的 HTML、CSS 和 JavaScript 文件。
laravel composer create-project laravel/laravel --prefer-dist npm npm install gulp webpack -g npm install
基于Node.js的自动化工具Gulp What is gulp?...然后以全局方式安装gulp： npm install -g gulp 全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。...gulp的使用 1.建立gulpfile.js文件 gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。...所以gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是我们应用gulp的一个原因。...gulp的使用流程一般是：首先通过gulp.src()方法获取到想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest(
在使用gulp当中，自动生成的node_modules文件夹，因为文件目录层级太深，无法系统删除，用360粉碎工具也报错 解决方法： 使用npm中的插件rimraf，专门用于删除的模块插件 1、安装...：npm install -g rimraf（全局安装） 2、使用：先定位目标文件夹的父级目录，然后命令行输入rimraf ***（***为需要删除的文件夹名称）， 案例：（命令行操作，删除gulptest...下的node_modules文件夹） ?...整个node_modules文件夹被删除的干干净净，也不会报目录太深的错了，大功告成，撒花~
大约是上一年的这个时候，因为项目合并来到了新的项目组中。虽然协作的同岗位同事也是同一个组的，但使用的Gulp 工作流却有些不一样。...初级玩家的玩法 Gulp 工作流中集成Sass 编译一般都是用gulp-sass 这个模块，本质上gulp-sass 调用的是node-sass（C++ 版的Sass）。...gulp-changed、gulp-cached 、gulp-remember、gulp-newer 等等。这几个Gulp 插件的区别有兴趣的可以自行去研究在这里不累赘述了。...而对应的Gulp 插件也有不少，不过本人使用的是在前人的基础上二次开发的 gulp-better-sass-inheritance。...Gulp 4 到现在两年多了一直都没有正式版(2018.1.1更新：已经发布，详情)，但用在生产环境中其实是一点问题都没有（就是安装的时候麻烦些）。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
