报错信息： /usr/local/lib/node_modules/gulp/bin/gulp.js:129 gulpInst.start.apply(gulpInst, toRun);...^ TypeError: Cannot read property 'apply' of undefined at /usr/local/lib/node_modules/gulp/bin/gulp.js...(bootstrap_node.js:420:7) at startup (bootstrap_node.js:139:9) at bootstrap_node.js:535:3 执行命令全局安装...gulp-cli npm i gulp-cli -g
= (cb) => { console.log('hello gulp') cb(); } exports.default = defaultTask; 然后我们在命令行执行 npx gulp...当我们执行npx gulp时会默认运行gulpfile.js导出的default,在gulpfile.js导出的任务会注册到gulp任务中 在gulp中任务主要分两种，一种是公开任务、另一种是私有任务...公开任务可以直接在命令执行npx gulp xxx调用执行，比如下面的defaultTask就是一个公开任务，只要被导出就是一个公开任务,没有被导出就是一个私有任务。...npx gulp taskJS 至此你会发现dist目录下就有生成的js了 安装less npm i less gulp-less --save-dev 在css/index.less中写入测试...npx gulp seriseTask时 已经在dist生成对应的文件了 编译转换es6 在我们index.js，很多时候是写的es6，在gulp中我们需要一些借助一些插件gulp-babel,另外我们需要安装另外两个
Gulp安装流程、使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一、名词介绍： Npm——node包管理工具 一开始我不理解，包管理工具是什么鬼。...可以js文件中需要什么插件再装什么插件） 10．Gulp实践流程：配置gulpfile.js文件命令，下载、调用gulp插件。...4．安装全局gulp 全局安装（全局安装gulp目的是执行gulp任务） 安装命令：cnpm install gulp -g 安装完毕后，看一下版本号有没有(命令行输入：gulp -v)，就知道有没有安装成功了...9．安装gulp插件 安装命令：cnpm install 替换插件名称 --save-dev（或者npm install 替换插件名称 --save-dev） 这里呢，你需要什么gulp插件就去命令行里装...或者（ gulp taskName） 直接调用gulp或者输入gulp+任务名称 比如在上边的gulpfile.js里边，我想调用sass任务，就直接在命令行输入gulp sass 如果我想调用所有的
运行局部命令 当你在当前项目安装rollup后，就可以用命令行npx执行rollup打包输出对应模式的bundle.js // 将index.js打包输出成bundle.iife文件，iife模式 npx...,对应文章源码参考nice_utils 准备基础库 首先我们把nice_utils[1]仓库下拷贝出src目录 目录大概就是下面这样 因为项目是支持ts的所以也需要安装typescript 执行以下命令...，然后初始化tsconfig.json npm i typescript --save-dev npx tsc --init npx tsc --init主要是默认生成ts配置文件 {...} } return config; } export default Object.keys(builds).map(getConfig) 以上一段代码看似好长，但实际上输出的就是一个数组配置...path.resove(__dirname, p),因为此时rollup是默认ESModule所以，__dirname就会报错,__dirname只有在cjs中才可以正确使用，所以这里只是换了一种方式，但实际上的作用并没有发生变化
installation # install create-react-app yard global add create-react-app # create a react application npx...Development Tools npx: node package runner babel: a JavaScript compiler....install and start ## Install the gulp command line utility npm install gulp-cli -g ## Install the...gulp package in your devDependencies ## cd npm install gulp --save-dev ## Verify your...gulp versions gulp --help ## new a gulp task file touch gulpfile.js ESLint The pluggable linting utility
安装gulp-file-include 先安装gulp以及gulp-file-include 先全局安装gulp npm install -g gulp gulp安装到当前开发环境 npm install...gulp --save-dev 安装gulp-file-include npm install gulp-file-include --save-dev 官方教程https://www.npmjs.com.../package/gulp-file-include 配置gulpfile.js 项目下新增gulpfile.js 文件，配置内容 //提示require找不到就加下面这2行 //import { createRequire...fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function() { gulp.src('src...include('include/top.html') 使用示例 @@include('include/foot.html') 执行命令
使用步骤 使用npm install nodemon –g 下载它 在命令行工具中用nodemon命令替代node命令执行文件 ?...5 第三方模块 Gulp 基于node平台开发的前端构建工具 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了 用机器代替手工，提高开发效率。...在命令行工具中执行gulp任务 8 Gulp中提供的方法 gulp.src()：获取任务要处理的文件 gulp.dest()：输出文件 gulp.task()：建立gulp任务...加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作 1.5.Node.js中模块加载机制 1 模块查找规则-当模块拥有路径但没有后缀时...再看是否有该名字的文件夹 如果是文件夹看里面是否有index.js 如果没有index.js查看该文件夹中的package.json中的main选 项确定模块入口文件 否则找不到报错
+(js|css) 匹配根目录下所有后缀为.js或者.css的文件 此外，Gulp也有很多其他的特征，但并不常用。如果你想了解更多的特征，请查看Minimatch文档。...结果就是，一启动 gulp，哗哗的语法错误提示，根本找不到自己想看的文件检测结果。这时修改一个文件，又对所有文件做了一次全量检测，又是哗哗的满屏错误提示。而我只关心当前修改的文件检测结果。...对于这块细节可以参看gulp详细入门教程；大概来讲就是可以借助npm init命令，按照其一步步提示，输入项目相关信息。...gulp-cached -g 接下来，(如果我们要使用gulp-concat这个模块)我们进入单独小项目(eg: gulpTest),使用npm link gulp-concat命令会去【mac/linux...browser-sync start --server --files "**/*.css, **/*.html" 注：在该文件下运行命令，默认需要启动网站文件：index.html。
该API集成了Gulp，为编译Laravel项目中的Less、Sass、CoffeeScript以及处理许多其他日常任务提供了一个简单的解决方案，从而减少编写上述繁琐任务的时间，有效提高编程效率。...你可以通过编写Gulp任务来自动构建这些令人头痛的任务，并且可以通过集成成百上千的 Gulp插件 来有效节省时间，避免重复造轮子。...npm 来安装Gulp： $ npm install -g gulp 安装完成后，可以从命令行执行如下命令查看Gulp版本： $ gulp -v [14:12:51] CLI version 3.8.10...你可以通过在项目根目录下运行 gulp 命令来执行定义在 elixir 方法中的任务： $ gulp [13:16:18] Using gulpfile ~/Software/dev.todoparrot.com...: [Laravel Elixir] [13:16:20] Finished 'less' after 1.52 s 通过执行 gulp 命令，我们已经成功将 app.less 编译为 app.css
本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下： "/css/style.css" => "/dist/css/style-1d87bebe.css..."/> 替换后： 但这种更改文件名的方式...容易导致发布后由于种种原因导致某些文件找不到的问题。...v=' + file.revHash; 第二步：打开nodemodules\gulp-rev\nodemodules\rev-path\index.js 第10行 (如果找不到此文件，则找到路径nodemodules...npm gulp然后运行试试。
# 示例代码：使用Webpack进行模块打包 npm install webpack --save-dev npx webpack 4.2 自动化任务 介绍自动化任务工具，如Gulp和Grunt，以简化开发工作流程...// 示例代码：使用Gulp执行任务 const gulp = require('gulp'); const minifyCSS = require('gulp-clean-css'); gulp.task...('minify-css', () => { return gulp.src('styles/*.css') .pipe(minifyCSS()) .pipe(gulp.dest('
基本思路是采用 gulp 进行代码的压缩等。 首先需要安装的 gulp 插件有：gulp-clean-css 、gulp-uglify、gulp-htmlmin、gulp-htmlclean。...安装它们并将其加入到 package.json 的依赖中： npm i --save gulp-clean-css gulp-uglify gulp-htmlmin gulp-htmlclean 当然，...你的电脑上需要安装有 gulp,我这里进行了全局安装： npm i -g gulp 然后在项目的根目录下新建 gulpfile.js 文件，里面一通配置，还是比较简单的，稍微熟悉点 gulp 的都没多大问题...： var gulp = require('gulp'); var cleancss = require('gulp-clean-css'); var uglify = require('gulp-uglify...这样在执行生成命令和部署命令中间加一个 gulp 的命令即可： hexo g gulp hexo d 实测发现貌似博客打开速度是快了那么一丢丢。哈哈，就当是有效的吧。
author: 项目的作者 license: 项目的许可证 devDependencies: 项目依赖的插件 repository: 项目资源库 6.在命令行中执行下面的命令，安装Gulp npm...; }); 8.使用gulp 打开命令行，并且在命令行中执行gulp say命令，可以看到在控制台中输出了一句”say hello”表示Gulp安装成功 使用Gulp实现一个文件拷贝任务 下面的操作都是在项目中安装了...目录中 .pipe(gulp.dest('dist/')); }); 4.在命令行中执行文件拷贝任务，将src目录下的index.html文件拷贝到dist目录下 gulp copy 文件拷贝命令执行完成后可以看到在...gulp copy命令，这样做做了重复性操作，也不符合使用Gulp实现自动化的特点，为了改成自动化执行文件拷贝命令，可以修改gulpfile.js中的代码 //载入gulp模块 var gulp = require...中文网 一点 | gulp教程 Browsersync中文网 meishadevs欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果。
的js文件，如果两个都含有同一任务，不特殊说明的话，命令行只执行文件名为gulpfile.js的任务），在命令行输入 npm install gulp --save-dev（之前没有安装过gulp的话...具体属性参考：https://github.com/nfroidure/gulp-minify-css。 minimist 这个插件，简单来说就是从命令行当中提取参数。...开发中经常会遇到的应用场景是提供不同的参数，即动态参数，对应到gulp中，如果我们需要在命令行中手动输入某个参数，此时就可以用minimist把他从命令行“提取”出来。...但个人实际操作为两个‘-’为key。可能原因是，我下的插件不是看的文档的这个库，或者英文太差看错了。。。。。具体用的时候要自己注意了。...比如： gulp.task('two', ['one'], function() { //任务two,会在任务one结束之后执行 }); 但个人还是更喜欢，用run-sequence因为一旦依赖项变多之后
，在操作上使用了 NodeJS 中的 stream (流)，通过 pipe() 方法导入到指定的地方，将前一级的输出，作为后一级的输入，不再需要进行频繁的 IO 操作，但需要注意的是，这里的流内容，并非原始的文件流...Node | Downloads下载完成后，通过命令行查看 NodeJS 是否成功安装，Mac 系统的命令行在终端 (Terminal)，Windows 系统的命令行可通过 window + r 输入...rimraf 可以删除所有的插件包，通过命令 npm install rimraf -g 安装 rimraf 之后，执行 rimraf node_modules 命令其他常用的 npm 命令，更新插件...跟 npm 的用法完全一样，只是在执行命令的时候，将 npm 换为 cnpm 即可gulp 安装执行命令 npm install gulp -g 全局安装 gulp，Mac 用户如果安装失败，可加上...+ 任务名的方式来运行指定的任务，而不会触发其他任务除了我们定义的 less 任务外，我们还定义了一个 default 默认任务，这对 Gulp 来说是必须的，当我们输入 gulp 命令时，将会自动执行
） 第二步：安装需要的插件 使用npm安装需要的插件（命令后面加 -g 表示全局安装，加 --save-dev 只安装到当前项目） 由于当前项目要使用，所以这些插件必须得安装到本项目中 安装命令如下：...************************************************** //命令行顺序: clean, rev 第五步：运行gulp命令 运行如下命令：gulp rev...运行完命令后的项目整体结构如下： ? WebContent目录的结构和dist目录的结构是一样的，如下： ? ?...所有的css和js文件都加了md5命名了，所有的图片体积也小了，但用肉眼看不出来图片质量有变化。 此时dist目录下所有的html文件引用的css和js的引用路径都变成带有md5命名的了。...第六步：代码的改动 如果后续代码有改动的话，执行一次gulp clean命令，再执行一次gulp rev 命令： gulp clean命令就可以把dist目录下生成的所有文件全部删除，gulp rev命令会根据新的代码重新生成所有文件到
更新记录 2022-01-19: 文本迁移 将gulp内容从合集迁移至独立文章 新增字体压缩相关内容 参考方向 教程原贴 gulp官方文档，用于查找API用法及查看已收录的gulp插件 gulp.js中文文档...两者的差别在于 terser 是 ES6 + 的 JavaScript 解析器，而 gulp-babel 是一个 JavaScript 转换编译器，可以把 ES6 转换成 ES5，两种方案都有效。...但使用上各有利弊。考虑到目前的浏览器市场占有率，更加建议各位使用 terser 来压缩 js。 方案一：为了适配绝大多数浏览器（IE：就是老子），可以将 ES6 语法降为 ES5 语法。...命令时依次执行以下任务 gulp.task('default', gulp.parallel( 'compress', 'minify-css', 'minify-html','mini-font'...命令时依次执行以下任务 gulp.task('default', gulp.parallel( 'compress', 'minify-css', 'minify-html','mini-font'
其底层实现原理是通过调用Shell去运行脚本命令，例如，执行npm run pub命令等同于执行node build.js命令。 Npm Script的优点是内置，无须安装其他依赖。...6 Rollup Rollup（https://rollupjs.org）是一个和Webpack很类似但专注于ES6的模块打包工具。...它的亮点在于，能针对ES6源码进行Tree Shaking，以去除那些已被定义但没被使用的代码并进行Scope Hoisting，以减小输出文件的大小和提升运行性能。...； Rollup不支持Code Spliting，但好处是在打包出来的代码中没有Webpack那段模块的加载、执行和缓存的代码。...但它的功能不够完善，在很多场景下都找不到现成的解决方案。
在命令行模式下执行： npm install -g gulp 这样就可以将 gulp 以全局方式安装到你的电脑上，以后可以随时通过命令行的 gulp 命令来调用。...命令来安装它们： npm install --save-dev gulp-uglify gulp-concat 在上面的例子中，安装了两个插件 gulp-uglify 和 gulp-concat, 通过它们可以对.../js')); }); // 定义默认任务 gulp.task('default', ['js']); 回到命令行（项目根目录），输入 gulp, 回车。...这样就可以在文件发生变化时自动执行特定的任务，不必每次修改了文件就要回到命令行手动执行 gulp. gulp.watch('....之后又听说过、尝试过一些前端构建工具，但都没有让我放弃 Grunt. 第一次看到 Gulp 的介绍时，就被它的配置语法所吸引。因为对于任何一个接触过 Node.js 的人来说，这语法是在是太舒服了。
webpack时，webpack会查找到当前目录下的src/index.js作为入口 所以，如果当前项目中没有src/index.js，那么会报错 当然也可以通过配置来指定入口和出口，例如(通常写配置文件) npx...，webpack 启动后会创建 compiler 对象，该对象一直存活知道结束退出 Compilation：单次编辑过程的管理器，比如watch = true 时，运行过程中只有一个 compiler但每次文件变更触发重新编译时...Webpack和Gulp gulp的核心理念是task runner 可以定义自己的一系列任务，等待任务被执行; 基于文件Stream的构建流; p我们可以使用gulp的插件体系来完成某些任务; webpack...相对于webpack的优缺点: gulp相对于webpack思想更加的简单、易用，更适合编写一些自动化的任务; 但是目前对于大型项目（Vue、React、Angular）并不会使用gulp来构建，比如默认...gulp是不支持模块化的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
