开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

运行gulp.watch或gulp

gulp.watch是Gulp.js中的一个方法，用于监视文件的变化并执行相应的任务。它是一个前端开发工具，用于自动化构建前端项目。

概念： gulp.watch是Gulp.js中的一个方法，用于监视指定文件的变化。当文件发生变化时，可以执行相应的任务，例如重新编译Sass文件、刷新浏览器等。

分类： gulp.watch属于Gulp.js的API之一，用于文件监视和任务执行。

优势：

自动化：gulp.watch可以自动监视文件的变化，并执行相应的任务，提高开发效率。
灵活性：可以根据需要监视指定的文件或文件夹，只执行相关的任务，避免不必要的操作。
实时更新：当文件发生变化时，gulp.watch可以立即执行相应的任务，实时更新项目。

应用场景： gulp.watch广泛应用于前端开发中，特别是在构建工具链中。常见的应用场景包括：

编译预处理器：监视Sass、Less等预处理器文件的变化，并自动编译成CSS文件。
自动刷新：监视HTML、CSS、JavaScript等文件的变化，并自动刷新浏览器，实时预览修改结果。
图片压缩：监视图片文件的变化，并自动压缩图片大小，提高网页加载速度。
资源合并：监视JavaScript、CSS等文件的变化，并自动合并、压缩文件，减少HTTP请求次数。

推荐的腾讯云相关产品：腾讯云提供了一系列与云计算相关的产品和服务，以下是一些推荐的产品：

云服务器（CVM）：提供弹性计算能力，可根据需求快速创建、部署和扩展云服务器。
云数据库MySQL版（CDB）：提供高可用、可扩展的MySQL数据库服务，适用于各种规模的应用。
云存储（COS）：提供安全可靠的对象存储服务，适用于存储和处理各种类型的数据。
人工智能机器学习平台（AI Lab）：提供丰富的人工智能算法和模型，帮助开发者构建智能化应用。
云安全中心（SSC）：提供全面的云安全解决方案，包括安全审计、漏洞扫描、威胁情报等功能。

产品介绍链接地址：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ailab
云安全中心（SSC）：https://cloud.tencent.com/product/ssc

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

gulp 实现纯html、css、bootstrap 的打包

); gulp.watch('index.html', gulp.series("html")); gulp.watch('css/main.css', gulp.series("css"));...gulp.watch('js/main.js', gulp.series("js"));});// 默认任务gulp.task('default', gulp.series('html', 'css'...Gulp在 my-project 文件夹中打开终端，运行以下命令启动 Gulp：gulp此时，浏览器会自动打开 http://localhost:3000/ 并显示您的 index.html 文件。...您可以在 css 和 js 文件夹中添加或修改文件，Gulp 将自动检测并重新打包它们。...打包静态文件当您想要生成静态文件时，可以运行以下命令：gulp dist该命令将创建一个名为 dist 的文件夹，其中包含压缩后的 HTML、CSS 和 JavaScript 文件。

6432 0

快速搭建gulp项目实战

安装Gulp环境 1.安装全局环境，运行命令 npm install gulp –g 3....2.在命令中运行安装本地Gulp环境 cnpm install gulp --save-dev 3.在本地文件新建文件名为 gulpfile.js 文件：　常用的一些方法 gulp.task 定义任务...gulp.src 找到执行文件 gulp.dest 执行任务的文件去出 gulp.watch 观察文件是否发生变化 4.安装一些常用的压缩包 cnpm install gulp-minify-css...("src/*.html",['copyHtml']); gulp.watch("src/images/*",['imagemin']); gulp.watch("src/js/*.js",['uglify...']); gulp.watch("src/lessc/*.less",['lessc']) }) 通过输入gulp watch自动编译目录中的结构 ?

1.1K2 0

【前端】我的Gulp配置

引入组件 // 保证在当前项目目录下曾经运行过： // npm install gulp-uglify gulp-rename gulp-babel babel-preset-es2015 ........./src/script/*.coffee', ['coffee']) gulp.watch('./src/style/*.styl', ['stylus']) gulp.watch('....// 保证在当前项目目录下曾经运行过： // npm install gulp-jshint gulp-concat gulp-uglify gulp-rename gulp-babel babel-preset-es2015...'watch', ['coffee', 'stylus'], function(){ gulp.watch('..../src/script/*.coffee', ['coffee']) gulp.watch('.

1561 0

在 VS 2015 中使用 Gulp 编译 TypeScript

就能看到这个名称为 tsc 的任务了，运行一下，果然在 wwwroot/app 目录下生成了对应的 js 文件，前进了一大步； 3、实现自动编译但是每次都运行这个任务还是太麻烦了，我们的目标是能够自动编译...ts 文件，这就需要使用 gulp.watch 了，当 app 目录发生变化时，就调用上面的 tsc 编译一下，我们的目的就达到了，接下来再定义一个 tsc:w 任务，来实现这个目标： gulp.task...('tsc:w', ['tsc'], function () { gulp.watch('app/**/*.ts', ['tsc']); }); 这代码也太简单了，监控 app 目录下面的所有...)) .pipe(gulp.dest('wwwroot/app')); }); 现在运行 tsc:w 任务，可以看到下面的输出： ?...() { gulp.watch('app/**/*.ts', ['tsc']); });

1.3K3 0

Electron开发时热加载

function () { electron.start(); gulp.watch(['....\\node_modules\\.bin\\gulp watch:electron", }, 添加客户端（注意二选一）客户端可以在主进程或渲染进程中添加，但是注意不要同时在主进程和渲染进程添加。...运行使用npm run hot即可运行项目 npm run hot 经测试修改主进程文件，会自动重启窗体；修改HTML/CSS文件，会自动刷新页面； gulp+electron-reload...= require('gulp'); gulp.task('watch:electron', function () { gulp.watch(['....\\node_modules\\.bin\\gulp watch:electron", }, 运行项目 npm run start npm run hot 我们分别运行项目的启动和自动webpack的脚本

3.3K2 0

gulp的安装和使用

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1、去nodejs官网安装nodejs 2、打开命令行，OSX是终端，...windows是命令提示符（window + r 输入cmd回车） 3、使用npm（nodejs的包管理器），或选装cnpm执行npm install cnpm -g --registry=https:...('watch', function() { 80 gulp.watch('style/**/*.scss', ['styles']);//处理样式 81 gulp.watch('script.../**/*.js', ['scripts']);//处理js 82 //gulp.watch('pic/**', ['images']);//处理图片 83 // Create LiveReload...server 84 livereload.listen(); 85 // Watch any files in assets/, reload on change 86 gulp.watch

1.2K5 0

Express+Less+Gulp配置高效率开发环境

// 监听所有css文档 gulp.watch('public/less/*.less', ['less']); // 监听所有.js档 gulp.watch('public.../js/*.js', ['js']); // 监听所有图片档 gulp.watch('public/img/**/*', ['img']); // 监听ejs gulp.watch...// 创建实时调整服务器 -- 在项目中未使用注释掉 var server = livereload(); // 监听 dist/ 目录下所有文档，有更新时强制浏览器刷新（需要浏览器插件配合或按前文介绍在页面增加...JS监听代码） gulp.watch(['public/dist/**']).on('change', function(file) { server.changed(file.path);...message: err.message, error: {} }); }); module.exports = app; 然后先在根目录下执行安装： npm install，使用时先运行

2.1K0 0

gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

gulp.watch("src/**/*.js", gulp.series("babel")) }) gulp.task("default", gulp.series(["babel", "watch..."])) 在 src 目录下使用 ES6 语法新建 js 文件，然后运行 gulp 默认任务，检查 dist 下的文件是否编译成功。...关于 ployfill 兼容可以直接在页面中引入 ployfill.js 或 ployfill.min.js 文件实现，这种方式比较简单，本文不再赘述，下面讲下在构建中的实现方式。...@babel/runtime（此处指@babel/runtime-corejs2）实现运行时编译到您的构建中。...("dist")) }) gulp.task("watch", () => { gulp.watch("src/**/*.js", gulp.series("babel")) }) gulp.task

1.2K2 0

Django打造大型企业官网（二）三、项目环境搭建

'auto',function () { gulp.watch("..../src/css/*.css",gulp.series('css')); gulp.watch("....('auto',function () { gulp.watch("..../src/css/*.scss",gulp.series('css')); gulp.watch("....'auto',function () { gulp.watch(".

1.3K3 0

Gulp使用指南

gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新...： 2 运行gulp任务　　要运行gulp任务，只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具)，然后在命令行中执行gulp命令就行了，...3.watch gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。...其语法为 gulp.watch(glob[, opts], tasks); glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。...('js/**/*.js', ['uglify','reload']); 　　gulp.watch()还有另外一种使用方式： gulp.watch(glob[, opts, cb]); glob和opts

1.3K6 0

gulp的使用

": "^1.0.2", "gulp-concat": "^2.6.1", "gulp-concat-folders": "^1.3.1", "gulp-connect": "^...在复制到package.json文件中后，使用npm install命令，npm会下载devDependencies中对应版本号的依赖文件，这里只是完成了本地的安装，此时如果运行 gulp命令可能会报一些错误...监听任务依赖包引用 var gulp=require('gulp'); var cssnano=require('gulp-cssnano'); var rename=require('gulp-rename...)) .pipe(bs.stream()); }); //舰艇文件修改任务 gulp.task('watch',function(){ gulp.watch(paths.html+"*.html"...,['html']); gulp.watch(paths.css+"*.scss",['css']); gulp.watch(paths.js+"*.js",['js']); gulp.watch

1.3K2 0

前端构建工具gulpjs的使用介绍及技巧

： ├── gulpfile.js ├── node_modules │ └── gulp └── package.json 2.2 运行gulp任务要运行gulp任务，只需切换到存放gulpfile.js...3.4 gulp.watch() gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。...gulp.task('reload',function(){ //do something }); gulp.watch('js/**/*.js', ['uglify','reload']); gulp.watch...来帮我们加载插件： var gulp = require('gulp'); //加载gulp-load-plugins插件，并马上运行它 var plugins = require('gulp-load-plugins...()方法 gulp.watch('less/*.less', ['less']); }); 如对gulp还有什么不明白之处，或者本文有什么遗漏或错误，欢迎一起交流和探讨~

1.9K3 0

Gulp-自动化编译sass和pug文件

： 1 var gulp = require('gulp'); 2 var pug = require('gulp-pug'); 3 var sass = require('gulp-sass')...; 4 var rename = require('gulp-rename'); 5 var notify = require('gulp-notify'); 6 var plumber = require...(paths.css)) 40 }); 41 42 gulp.task('watch', ['sass'], function () { 43 gulp.watch(paths.pugWatch2..., ['pug']); 44 gulp.watch(paths.sassWatch, ['sass']); 45 }); 46 47 gulp.task('default', ['watch',...声明：　　请尊重博客园原创精神，转载或使用图片请注明：　　博主：xing.org1^ 　　出处：http://www.cnblogs.com/padding1015/

9307 0

Gulp基本使用

1.基本使用 npm i gulp-cli -g npm i gulp -D cnpm i gulp gulp-uglify gulp-concat 2.创建文件gulpfile.js键入如下 const.../bunld/js/bundle.min.js 运行命令 gulp 返回如下 $ gulp [08:51:09] Using gulpfile ~\Desktop\nodejs\gulp\gulpfile.js...'); const sourcemaps = require('gulp-sourcemaps'); const watcher = gulp.watch(['....console.log(`File was changed`); done() } //监听文件 function watch(){ livereload.listen(); gulp.watch.../src/*.js', js) //重新加载对应文件 gulp.watch(['./src/*.js','.

9651 0

node和gulp实现前端工程自动化(附：gulp常用插件)

JS合并压缩混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包，因为这个包提供了一些API var gulp = require('gulp'...dist'] }, }, function(err, bs) { console.log(bs.options.getIn(["urls", "local"])); }); gulp.watch...('src/styles/*.less',['style']); gulp.watch('src/scripts/*.js',['script']); gulp.watch('src/images...*',['image']); gulp.watch('src/*.html',['html']); }); 附录： gulp常用插件： gulp-less：编译less gulp-concat：合并代码...gulp-uglify：压缩js文件 gulp-rename：重命名文件 gulp-cssnano：css压缩 gulp-htmlmin：压缩html gulp-imagemin：压缩图像 brower-sync

5091 0

gulp 详解与使用

下面详细介绍一下： gulp.src() gulp.src() 可以读取你需要操作的文件，相比于 Grunt 主要以文件为媒介来运行它的工作流，gulp 使用的是 Nodejs 中的 stream 流，...gulp.task() gulp.task 方法用来定义任务，内部使用的是 Orchestrator ，其语法为： gulp.task(name[, deps], fn) name 为任务名，如果你需要在命令行中运行你的某些任务...gulp.watch() gulp.watch() 用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。...() { //do something }); gulp.watch("js/**/*.js", ["uglify","reload"]); gulp.watch(glob [,opts, cb])...--silent 禁止所有的 gulp 日志命令行会在 process.env.INIT_CW 中记录它是从哪里被运行的。

1.2K1 0

Gulp基本用法

Gulp是一个模块化打包工具。 Gulp本身只有几个入口，支持他拥有强大功能的是各种各样的插件。...下面记录一下Gulp的API以及一些用到的插件。...---- gulp.watch(glob[, opts], tasks) 监视文件，并且可以在文件发生改动时候做一些事情。...eg: var watcher = gulp.watch('js/**/*.js', ['uglify','reload']); watcher.on('change', function(event)...{ console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); }); gulp.watch

7323 0

前端工程化 | 定制专属提速“外挂”（上）

这样的好处在于每次修改代码后，开发工程师不用去按F5键或移动鼠标到浏览器选中刷新查看效果，节省了大量重复性的操作时间，进一步提高了开发效率。...gulp.watch(['./**/*.html']).on('change', reload); 2.5 完整的配置代码 // 引入Gulp安装好的插件 require('模块名称') var gulp...baseDir: './' } }); gulp.watch(['./**/*.html']).on('change', reload); }); Tips：Ctrl...+ C可以终止browser-sync的运行。...browserSync.init({ server:{ baseDir:'./' } }); gulp.watch(['./*

1K5 0

给初学者的Gulp教程（译）

watch文件的语法是： //Gulp watch syntax gulp.watch('files-to-watch',['tasks','to','run']); 如果我们希望监视多个Sass文件以及运行...syntax gulp.watch('app/scss/**/*.scss',['sass']); 虽然更多时候，我们希望同时监视多种类型文件。...为了实现，我们可以将多个监视进程加入到一个组里，放到一个watch任务: gulp.task('watch',function(){ gulp.watch('app/scss/**/*.scss...gulp.task('watch',['browserSync','sass'],function(){ gulp.watch('app/scss/**/*.scss',['sass']);...gulp.task('watch',['browserSync','sass'], function(){ gulp.watch('app/scss/**/*.scss',['sass']);

4.3K2 0

如何为你的微信小程序瘦身？

/dist')) }) gulp.task('json:watch', () => { gulp.watch('..../dist/assets')) }) gulp.task('assets:watch', () => { gulp.watch('..../dist')) }) gulp.task('templates:watch', () => { gulp.watch('..../dist')) }) gulp.task('styles:watch', () => { gulp.watch('..../dist')) }) gulp.task('scripts:watch', () => { gulp.watch('.

7275 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭