Gulp任务未创建css文件 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

目前index.html文件中的css和js的引用路径是这样的，如下图： ? 其他目录下的html文件也是这样的，都引用的是未压缩和md5命名的css和js文件。...第四步：创建一个gulpfile.js文件，该文件和node_modules文件夹平级 gulpfile.js文件内容如下： gulpfile.js: var gulp = require('gulp'...= require('q'); //- 用于解决任务执行顺序的问题（一个任务执行完毕才执行另外一个任务）（暂时还没用到） /*清理文件*/...{ //- 创建一个名为compress-js的task gulp.src(['webContent/js/**/*.js']) //- 需要处理的js文件，...文件，并生成md5后缀的css文件*/ gulp.task('compress-css', function(callback) { //- 创建一个名为compress-css的task

13.3K8 0

Bear CSS：基于 HTML 文件快速创建基本的 CSS 样式

当你创建一个网页的时候，一般会先创建 HTML 文件，然后在写 CSS 样式，当然也可以一边写 HTML 结构，一遍写样式。...如果你是采用第一种方法，那么你在写 CSS 样式的时候，会很烦，因为要复制粘贴 class 和 id 名，其实可以通过 Bear CSS 这个服务，基于现有的 HTML 创建基本的 CSS 样式： Bear...CSS 就是一个这样的网页服务，基于现有的 HTML 文件，生成一个含有所有元素，id，class 的 CSS 样式文件。...Bear CSS 使用也非常简单，上传你的 HTML 文件，Bear CSS 就会根据你的 HTML 文件，生成对应的 CSS 文件，然后你下载就好了。...在给非常长的 HTML 文件进行样式化的时候，这个应用是非常实用的，唯一的缺点就是在生成 CSS 文件的时候无法自己定义包含哪些 id 或者 class，生成的 CSS 文件有点冗余。

1.9K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

CA2008：不要在未传递 TaskScheduler 的情况下创建任务

值规则 ID CA2008 类别可靠性修复是中断修复还是非中断修复非中断原因任务创建或延续操作使用未指定 TaskScheduler 参数的方法重载。...规则说明以下 .NET 任务创建和延续方法具有允许指定或省略 TaskScheduler 实例的重载： System.Threading.Tasks.TaskFactory.StartNew 方法 System.Threading.Tasks.Task.ContinueWith...如果没有此类任务，则返回 Default，它表示线程池。在某些情况下，使用 Current 可能会导致死锁或 UI 响应问题，因为原本打算在线程池上创建任务，但却等待返回到 UI 线程。...TaskCreationOptions 和 TaskContinuationOptions VSTHRD105 - 避免使用假定 TaskScheduler.Current 的方法重载 CA2007：不直接等待任务

8623 0

放弃webpack,拥抱gulp

别被标题吓到，哈哈，即使现在vite横空出世，社区光芒四射，两个字很快，但是webpack依旧宝刀未老，依然扛起前端工程化的大梁，但是今天我为啥说要拥抱gulp，因为我们常常吃一道菜，所以要换个口味，...个人理解gulp是一种命令式编程的体验，更注重构建过程，所有的任务需要你自己手动创建，你会对构建流程会非常清楚，这点不像webpack，webpack就是一个开箱即用的声明式方式,webpack是一个模块化打包工具...在这之前我们在输出dest时候我们都指向了一个具体的文件目录，在src这个api中是创建流，从文件中读取vunyl对象，本身也提供了一个base属性，因此你可以像下面这样写 const { src, dest...-- endinject --> 当我们运行npx gulp seriseTask时创建本地服务我们需要将前面所有的js，css，html组织起来，在本地服务中使用...创建的服务文件夹存在，不然页面打开就404错误 npm run server 至此gulp搭建一个简单的应该就已经完全ok了这页面背景貌似有点黄总结 gulpjs开发是一个任务流的开发方式，它的核心思想就是用自动化构建工具增强你的工作流

1.4K1 0

Gulp开发教程（翻译）

首先创建一个名为gulpfile.js的文件，这是定义Gulp任务的地方，它可以通过gulp命令来运行，接着把下面的代码放到gulpfile.js文件里面。...在上面的例子中，gulp.src()函数用字符串匹配一个文件或者文件的编号（被称为“glob”）,然后创建一个对象流来代表这些文件，接着传递给uglify()函数，它接受文件对象之后返回有新压缩源文件的文件对象...js目录下包含了压缩和未压缩的JavaScript文件，现在我们想要创建一个任务来压缩还没有被压缩的文件，我们需要先匹配目录下所有的JavaScript文件，然后排除后缀为.min.js的文件: gulp.src...gulp.task('build', ['css', 'js', 'imgs']); 这些任务不是同时进行的，所以你不能认为在js任务开始的时候css任务已经结束了，也可能还没有结束。...CSS here }); 现在，当执行css任务时，Gulp会先执行greet任务，然后在它结束后再调用你定义的函数。

1.7K4 0

Gulp探究折腾之路(I)

//创建Default Task:注册缺省任务 gulp.task('default', function() { gulp.run('jshint', 'scripts'); gulp.watch...可以根据gulp.task(name[, deps], fn)特性写法替代之。deps：(Array)一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。...//创建Default Task:注册缺省任务 gulp.task('default', ['jshint' , 'scripts', 'watch']); 折腾gulp.src() Gulp使用node-glob...js目录下包含了压缩和未压缩的JavaScript文件，现在我们想要创建一个任务来压缩还没有被压缩的文件，我们需要先匹配目录下所有的JavaScript文件，然后排除后缀为.min.js的文件: gulp.src...// 主机名可以是ip或域名 browser-sync start --proxy "主机名" "css/*.css" 在本地创建了一个PHP服务器环境，并通过绑定Browsersync.cn来访问本地服务器

2.6K8 0

ASP.NET Core 中的捆绑和缩小静态资产

基于环境的捆绑和缩小从 Gulp 使用 bundleconfig.json 手动转换捆绑和缩小工作流以使用 Gulp 运行 Gulp 任务其他资源参考资料最近在B站上看到杨旭老师的 ASP.NET...如果未在资产上正确设置 expires 标头，且未使用捆绑和缩小，则浏览器的新鲜度启发会在几天后将资产标记为过期。此外，浏览器还需要对每个资产进行验证请求。...捆绑捆绑将多个文件合并到单个文件中。捆绑可减少呈现 Web 资产（如网页）所需的服务器请求数。可以专门为 CSS、JavaScript 等创建任意数量的单个捆绑。...通过使用设计时捆绑和缩小，在应用部署之前创建缩小文件。在部署之前进行捆绑和缩小具有减少服务器负载的优点。但是，必须认识到，设计时捆绑和缩小会增加生成的复杂性，并且仅适用于静态文件。..., gulp.series("min")); 运行 Gulp 任务若要在 Visual Studio 中生成项目之前触发 Gulp 缩小任务：安装 BuildBundlerMinifier NuGet

5.9K2 0

Gulp 快速入门

在项目根目录下创建一个名为 gulpfile.js 的文件： var gulp = require('gulp'); // 默认task gulp.task('default', () => {...; 输出顺序为： task1 Hello World task2 流式处理 (1) 在项目根目录下创建 src 文件目录，里面创建 index.js (2) 在项目根目录下创建 dist 文件目录...gulp.src() 在上面的例子中，gulp.src() 函数用字符串匹配一个文件或者文件的编号（被称为“glob”）,然后创建一个对象流来代表这些文件，接着传递给 uglify() 函数，它接受文件对象之后返回有新压缩源文件的文件对象...+(js|css) 匹配根目录下所有后缀为 .js 或者 .css 的文件假如 js 目录下包含了压缩和未压缩的 JavaScript 文件，现在我们想要创建一个任务来压缩还没有被压缩的文件，我们需要先匹配目录下所有的...); 所以只要依赖的任务是上面三种情况之一，就能保证当前任务在依赖任务执行完成后再执行。

1.3K1 0

Gulp 在金蝶云平台项目中的使用经验

其中专门创建一个 gulp 目录用来存放 gulp 代码，为了能够将任务更加细化，职责单一，方便日后的维护更新。...└─ gulp/ # gulp 配置目录 ├─ tasks # 任务配置目录 ├─ image.js #...// 打包 css 文件 gulp.task('build:css', function(cb) { runSequence( 'usemin:css', 'sass...:dist', 'rev:css', cb ); }); 第三个步骤是 js 文件的打包，打包 RequireJs 代码可以根据依赖进行 js 文件的合并压缩...未解决的问题开发阶段：对 RequireJs 的路径配置（config.js 与 gulp 中的配置）感到困惑迷糊，多创建一个目录就路径不匹配打包不成功。

2.6K0 0

给初学者的Gulp教程（译）

gulp.src告诉Gulp任务，所要使用的文件。gulp.dest`告知当任务完成后，Gulp输出文件的地址。让我们来尝试构造一个真实的任务，将Sass文件编译成CSS文件。...中会有一个styles.css文件被创建。...如果你增加一个print.scss文件到项目中，你将看到print.css被创建到app/css。 ?...结束我们已经经过了Gulp的基础以及创建了一个工作流，可以将Sass编译成CSS，同时监测HTML和JS文件发生改变。我们可以在命令行通过gulp命令运行这个任务。...我们也构建了第二个任务，build,创建一个dist文件夹给生产用网页。我们编译Sass为CSS，压缩我们所有的资源文件以及复制必要的文件夹到dist文件夹。

5.8K2 0

JavaScript全栈开发-工具篇（上）

配置文件模块安装完成后，在项目根目录创建名为Gruntfile.js的配置文件。...--save-dev npm install del --save-dev 2.2 Gulp配置模块安装完成后，在项目根目录下创建 gulpfile.js 代码文件。...多次调用dest将多次输出到多个目录，目录不存在则创建 -- gulp.task(name [,deps], fn)：指定任务名及任务函数来定义任务。default为Gulp默认执行的任务。...以下为压缩css的任务的配置文件 //Gulpfile.jsvar gulp = require("gulp"), mincss = require("gulp-minify-css"), ...del = require("del");var stream = gulp.src("css/*.css"); //定义压缩的文件，返回stream//压缩前先清除文件夹里面的内容 gulp.task

2.8K1 0

给ASP.NET Core Web发布包做减法

我们就顶多引用了个js和css文件而已。到这里，减负的思路我们就清晰了。剔除ASP.NET Core Web中未引用的Bower包文件，把没有引用到的文件删除不就得了？！...$ npm install --save-dev path $ npm install --save-dev del 安装成功后会在项目根目录创建package-lock.json文件和node_components...在项目根目录下创建一个名为 gulpfile.js 的文件。将以下代码粘贴复制进去。 const gulp = require('gulp');//1....; //将三个任务组装在一起 gulp.task('default', ['clean:all', 'copy:file', 'copy:folder']); 代码注释的很详细，就不过多赘述了。...因为引用的font-awesome.min.css会引用包文件的一些字体文件等，为了省事，就把包全部拷贝了一遍。而一般绝大多数包都是简单拷贝css和js文件就ok了的。

2K1 0

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

然后，可以使用以下命令在全局围内安装 gulp：npm install -g gulp创建项目目录在本地磁盘上创建一个新的文件夹，例如 my-project，然后在其中创建以下文件：my-project...') .pipe(browserSync.stream());}// CSS 任务function css() { return gulp.src('css/main.css') .pipe...gulp.watch('js/main.js', gulp.series("js"));});// 默认任务gulp.task('default', gulp.series('html', 'css'...您可以在 css 和 js 文件夹中添加或修改文件，Gulp 将自动检测并重新打包它们。...打包静态文件当您想要生成静态文件时，可以运行以下命令：gulp dist该命令将创建一个名为 dist 的文件夹，其中包含压缩后的 HTML、CSS 和 JavaScript 文件。

1.7K2 0

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

三、项目环境搭建 3.1.创建项目环境和安装包创建django项目 mkvirtualenv DjangoProject workon DjangoProject pip install -i...'baseDir':'./', } }) }); //创建一个默认任务 gulp.task("default",gulp.parallel('bs','auto')); 3.3...把index.css改成index.scss文件 ?...gulpfile.js修改 var sass = require("gulp-sass"); // css任务 gulp.task("css",done =>{ gulp.src("....'baseDir':'./', } }) }); //创建一个默认任务 gulp.task("default",gulp.parallel('bs','auto'));

1.6K3 0

Django打造大型企业官网（一）一、nvm的安装二、gulp的安装和用法

2.创建gulp任务在项目根目录创建 gulpfile.js，里面代码如下 var gulp = require("gulp"); gulp.task("greet",done => {...console.log('hello world'); done(); }); 终端输入命令执行任务：gulp greet ? ...3.创建css处理文件任务主要对css文件进行压缩，然后再将压缩的文件放到指定目录安装插件 npm install cssnano --save-dev gulpfile.js代码 var gulp.../dest/css/")) done(); }) 5.创建处理js文件的任务安装插件 npm install gulp-uglify --save-dev gulpfile.js var uglify.../css/*.css', gulp.series('css')); }) 修改代码后，自动执行相应的任务 ?

1.4K4 0

使用Gulp

文件拷贝命令执行完成后可以看到在code目录下自动创建了一个dist文件夹，并且在dist文件夹下自动创建了一个index.html文件，表示文件拷贝任务运行成功 5.自动执行文件拷贝任务在这个文件拷贝任务中...'gulp-less'); //创建一个将Less编译成CSS的任务 gulp.task('less', function() { gulp.src('less/*.less') .pipe...(less()) .pipe(gulp.dest('css/')); }); //监视less任务 //当less文件发生变化的时候，会自动将Less转换成CSS gulp.task('watchLess.../less/*.less', ['less']); }); 5.在命令行中执行下面的命令，启动将Less文件编译成CSS文件的任务 gulp watchLess 5.修改less文件夹下的style.less...打开less文件夹下的style.less文件，并且修改style.less文件，当保存后会自动将style.less文件编译成css文件，并且会自动创建一个css目录，在css目录下自动创建一个style.css

1.3K3 0

精通gulp常用插件

这个文件 .pipe(uglify()) // 对其他文件进行压缩 .pipe(f1.restore) // 返回到未过滤执行的所有文件...描述：给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css var rev = require('gulp-rev'); gulp.src('..../dist/css')) gulp-rev-replace 描述：重写被gulp-rev重命名的文件名。...描述：有条件地运行一个任务。.../sass/**/*.scss', ['sass']); // 实时监听sass文件变动,执行sass任务 gulp-babel 描述：将ES6代码编译成ES5。

1.9K9 0

Gulp能做什么

gulp库文件在项目根目录下建立gulpfile.js文件重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件在gulpfile.js文件中编写任务....在命令行工具中执行gulp任务（8）Gulp中提供的方法 gulp.src()：获取任务要处理的文件 gulp.dest()：输出文件 gulp.task()：建立gulp任务 gulp.watch(.../src/css/base.css') .pipe(gulp.dest('dist/css')); }); // html任务 // 1.html文件中代码的压缩操作 // 2.抽取html...', () => { // 选择css目录下的所有less文件以及css文件 gulp.src(['....选择一系列文件并创建可读流（readableStream）。

2.3K3 0

前端开发使用工具 gulp

gulp 创建gulpfile.js文件 // 以下代码会执行在node环境下 var gulp = require( "gulp" ); // 创建一个gulp的任务 gulp.task( "default...var cssnano = require('gulp-cssnano'); // 定义一个处理css文件改动的任务 gulp.task('css',function(){ gulp.src.../dist/css/")) }); 新建dist文件夹来存放生成的css任务执行 gulp css ?...在dist文件夹的css文件夹生成了index.css *{margin:0;padding:0}p{color:red} gulp 修改压缩的文件名 npm install gulp-rename...require('gulp-cssnano'); var rename = require('gulp-rename') // 定义一个处理css文件改动的任务 gulp.task('css',function

1.8K1 0

Hexo博客推荐安装的插件

); //图片压缩组件 var changed = require("gulp-changed"); //文件更改校验组件 var gulpif = require("gulp-if"); //任务帮助调用组件...var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容） var isScriptAll = true; //是否处理所有文件，.../public")); //输出到目标目录 }); // 压缩public目录下的css文件 gulp.task("compressCss", function () { var option...最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数以后的执行方式有两种：直接在Hexo根目录执行 gulp或者 gulp default ，这个命令相当于...当 SMTP_SERVICE 未配置时才会启用自定义邮件服务如何使用阿里云邮件推送首先在阿里云创建好发信地址类型选择：触发邮件 ? 发信地址随便写，然后设置好SMTP密码。

1.7K2 0

点击加载更多

Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

Bear CSS：基于 HTML 文件快速创建基本的 CSS 样式

CA2008：不要在未传递 TaskScheduler 的情况下创建任务

放弃webpack,拥抱gulp

Gulp开发教程（翻译）

Gulp探究折腾之路(I)

ASP.NET Core 中的捆绑和缩小静态资产

Gulp 快速入门

Gulp 在金蝶云平台项目中的使用经验

给初学者的Gulp教程（译）

JavaScript全栈开发-工具篇（上）

给ASP.NET Core Web发布包做减法

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

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

Django打造大型企业官网（一）一、nvm的安装二、gulp的安装和用法

使用Gulp

精通gulp常用插件

Gulp能做什么

前端开发使用工具 gulp

Hexo博客推荐安装的插件

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐