GULP新手-是否有必要将项目的所有文件从src目录复制到dist目录？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular企业级开发(6)-使用Gulp构建和打包前端项目

/build/')) }) 上面gulp配置完成的内容是： 1.将目录下所有的以.js结尾的文件 2.执行jshint代码检查 3.然后concat合并为一个文件， 4.再使用uglify...对文件进行压缩， 5.最后输出到当前目录下，build文件夹中。...项目构建中需要使用的模块有以下这些： var gulp = require("gulp"); //connect静态服务器 var connect = require("gulp-connect");...minifyHtml = require('gulp-minify-html'); //项目中需要将.less文件重命名为.css var rename = require('gulp-rename...在gulpfile.js中有一个task名为vendor，主要任务就是将项目中实际使用的js和css复制到发布文件夹中。我们项目发布文件夹名字为dist。

2K5 0

给初学者的Gulp教程（译）

node-modules.png 我们差不多可以开始使用Gulp来工作了，在我们做这个之前，我们还要了解我们如何在项目中使用Gulp，以及确定项目的目录结构。...自从app被用来开发目的后，我们所有的代码都要放到app文件夹中。我们将不得不保持目录结构当我们运行我们的Glup配置。现在，让我们开始在gulpfile.js中，创建我们第一个Gulp任务。...监视Sass文件更改 Gulp提供我们一个watch方法，监视是否有文件更改。...我们需要做的就是将字体复制到dist。我们可以使用Gulp复制文件通过gulp.src和gulp.dest，不需要其他插件。...我们压缩资源文件，像CSS,JavaScript和图片在这个进程以及从app文件夹复制字体文件到dist文件夹。

4.3K2 0

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

是的

没有找到

gulp自动化打包（上）

gulp插件（也是此次打包主要用的gulp插件），而下篇主要以一个demo项目为例，从本地checkout出合适的git版本，压缩、合并、到最后打成zip包，发送至指定目录，做一个全面的演示。...图中主要演示项目中大概会有的几种文件类型，fonts(ttf,svg)，image(jpg,png),js,less(sass),实际项目会复杂得多，开始一个项目的时候，可以直接从git上拿一个angular-seed...ok,安装好nodejs之后，在项目的src目录下（与index.html的同级目录）建立一个package.json文件与gulpfile.js（这个名字要对，不然命令行识别不了，项目中有时建立两个gulp...gulp-del 删除目标目录，目标文件，演示var del=require(‘gulp-del’) gulp.task(‘clean’,function(){ return del(config.dist.basePath...('src/*') .pipe(zip('zipName.zip')) .pipe(gulp.dest('dist')); }); gulp-ftp 将目标文件，发送至FTP

1.6K3 0

基于 gulp 的 fancybox 源码压缩

大家现在看到的这个图片是我使用 gulp 的一个基本的项目结构，而这边的 src 文件就是我们的源文件，dist 是通过 gulp 编译过后的文件（稍后会详细说明每一个文件的作用）。...不错，它就是来处理上述这些事情的，而且我们在编辑器里修改的代码都是在 src 的目录下，而 dist 文件目录就是经过上述处理过后的文件目录，江湖人称编译过后的文件目录，而 gulp 就是起到了这个桥梁的作用...它就是告诉了 gulp 我们要将什么文件编译到什么文件下的 XXX 目录里面。...例如在我的 src 目录里面存在一个 css 文件夹，里面装了很多 css 或者 LESS 等样式文件，我现在想通过 gulp 将它编译到 dist 目录下面的 css 文件夹里面并且这个 css 文件夹里的样式文件还是压缩过了...对于已经存在package.json配置文件(定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）)的目录，我们可以直接在当前目录执行npm install进行安装，npm

1.1K1 0

快速搭建gulp项目实战

gulp.src 找到执行文件 gulp.dest 执行任务的文件去出 gulp.watch 观察文件是否发生变化 4.安装一些常用的压缩包 cnpm install gulp-minify-css...var gulp = require('gulp'); gulp.task("copyHtml",function(){ gulp.src("src/*.html") //当前目录下所有的html...("copyHtml",function(){ gulp.src("src/*.html") .pipe(gulp.dest("dist")) //把src目录中所有html格式的文件全部合并到...dist目录中 }) //图片压缩 gulp.task("imagemin",function() { gulp.src("src/images/*") 所有src > images中的图片...("dist/css")) //通过gulp lessc 命令，自动输出dist/css文件 }) //监听文件是否有变化 gulp.task("watch",function(){ gulp.watch

1.1K2 0

node.js 使用教程-2.Gulp 打包构建入门与使用

另存到dist压缩后的文件 .pipe(gulp.dest('dist/js')) }) 执行命令 > gulp js src/js/ext.js 原始的代码如下压缩后的代码 gulp...gulp.src(path) - 选择文件，传入参数是文件路径。...src/js/‘ 目录下所有的 .js 文件压缩后放到 dist/js 目录。...另存到dist压缩后的文件 .pipe(gulp.dest('dist/js')) }) default 默认任务如果有些文件不做任何处理，直接负责到dist目录，比如把html文件复制到...dist目录 gulp.task('html', async () =>{ gulp.src('src/*.html') .pipe(gulp.dest('dist')); }); 当任务越来越多的时候

1.2K2 0

基于 gulp 的 fancybox 源码压缩

的一个基本的项目结构，而这边的 src 文件就是我们的源文件，dist 是通过 gulp 编译过后的文件（稍后会详细说明每一个文件的作用）。...不错，它就是来处理上述这些事情的，而且我们在编辑器里修改的代码都是在 src 的目录下，而 dist 文件目录就是经过上述处理过后的文件目录，江湖人称编译过后的文件目录，而 gulp 就是起到了这个桥梁的作用...它就是告诉了 gulp 我们要将什么文件编译到什么文件下的 XXX 目录里面。...例如在我的 src 目录里面存在一个 css 文件夹，里面装了很多 css 或者 LESS 等样式文件，我现在想通过 gulp 将它编译到 dist 目录下面的 css 文件夹里面并且这个 css 文件夹里的样式文件还是压缩过了...对于已经存在 package.json 配置文件(定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）)的目录，我们可以直接在当前目录执行 npm install 进行安装

1.2K3 0

gulp常用插件一

前言如果你已经在项目中引入了gulp，那么不妨尝试用一些gulp集成好的插件来做一些任务。下面假定前端项目中根目录有src以及dist两个，分别用于开发和生产。...* 所有的模块使用都需要require引入，如果下面代码有遗漏请自觉加入。...return gulp.src('src/less/style.less') .pipe(less()) //less编译 .pipe(gulp.dest('dist/css')); //编译为同名的文件...dist/css/*min.css'], cb);}) //删除管道中的文件 gulp.task("del-less",function(){ return gulp.src('src/less/demo.less...使用场景：复制相关的文件结构到生产目录，比如页面文件。

8872 0

放弃webpack,拥抱gulp

less文件，dest输出到dist/css目录下 return src(pathDir('public/css/*.less')).pipe(less()).pipe(dest(pathDir('...在这之前我们在输出dest时候我们都指向了一个具体的文件目录，在src这个api中是创建流，从文件中读取vunyl对象，本身也提供了一个base属性，因此你可以像下面这样写 const { src, dest...-- endinject --> 当我们运行npx gulp seriseTask时创建本地服务我们需要将前面所有的js，css，html组织起来，在本地服务中使用...://localhost:8081 我们使用了一个watch监听public目录下的所有文件，如果文件有变化时，会执行taskBuild任务会在dist目录下生成对应的文件，然后会启动一个本地服务，打开一个...重新组织gulpfile 最后我们可以再重新组织一下gulpfile.js，因为多个任务写在一个文件里貌似不太那么好维护，随着业务迭代，会越来越多，因此，有必要将任务分解一下在根目录新建task，我们把所有的任务如下

8721 0

gulp自动化打包（下）

'] } output:{ dist:'dist', plugins:'dist/plugins' } } 如果不想要某文件，比如不想去压缩html1.html var path={ input...src/app/html1.html'], } } ‘!’后面也可以跟某一类型文件，或者直接指定某文件夹。...打zip包经过合并压缩等操作之后，项目会自动生成dist目录，dist目录下即为打包生成的各种文件，接下来的目标是将dist目录下的所有文件打成一个zip包，代码如下： gulp.task('zip_new...，最后一项不加return，在本例中，即ftp的方法不用返回。...清理dist目录写到这里，还有一个问题，就是没有对文件夹进行清理，这也是比较重要的，在每一次开始打包工作之前，我们需要清理dist目录，以保证下一次打包不会被上一次打包的文件“污染”。

1.2K2 0

GalMenu

由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源，将压缩包内的butterfly文件夹复制到[Blogroot]\theme\目录下覆盖现有主题文件夹即可跳过以下教程的前...下载galmenu.zip 不含进阶教程内容具体步骤在目录下新建文件。注意缩进。...\目录下新建galmenu.styl文件。...在目录下新建文件：使用即可访问随机文章。添加镜像站跳转功能使用原生js实现，因为要添加onclick()动作，比起添加配置项还是直接改源码比较快。...="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"> TO DO 将模板转为PUG，添加配置项，支持自定义修改

4653 0

模块加载及第三方包

公共文件抽离修改文件浏览器自动刷新 7 Gulp使用使用npm install gulp下载gulp库文件在项目根目录下建立gulpfile.js文件重构项目的文件夹结构...src目录放置源代码文件 dist目录放置构建后文件在gulpfile.js文件中编写任务..../src/css/base.css') // 将处理后的文件输出到dist目录 .pipe(gulp.dest('....() => { //选择css目录下的所有less文件以及css文件 gulp.src(['....会假设它是系统模块 Node.js会去node_modules文件夹中首先看是否有该名字的JS文件再看是否有该名字的文件夹如果是文件夹看里面是否有index.js 如果没有

1.8K3 0

第三方模块

Gulp使用使用npm install gulp下载gulp库文件在项目根目录下建立gulpfile.js文件重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件.../src/css/base.css') //将处理后的文件输出到dist目录 .pipe(gulp.dest('./dist/css')) ; }) ; 可能会出现如下错误： ?.../src/css/base.css') // 把处理后的文件输出到dist目录 .pipe(gulp.dest('....// html任务 // 1.压缩html文件里面的所有代码 // 2.抽取html文件里面的所有公共代码 gulp.task('htmlmin', done=> { // 获取当前目录下src...下所有的html文件 gulp.src('.

1.1K2 0

基于gulp的前端自动化方案

实践创建项目目录首先初始化npm依赖项与基本信息，使用命令npm init一直回车，生成package.json文件，也可以直接去上边github仓库目录下载。...你的项目目录关系到你的gulp脚本里的任务路径，我脚本里写的是匹配所有的目录和文件。我简单举个例子：这里js/common里的js文件也会被处理。如果只想处理特定目录的文件，请修改任务里的路径。...{png,jpg,gif,ico}', JS: '**/*.js' } 压缩处理css 这里需要排除node_modules文件夹和生成构建的后的目录/dist/及它们的子目录，直接 !...后面跟要排除的目录就行了。 gulp.task('minify-css', function () { return gulp.src([PATHS.CSS,'!./dist/**', '!....gulp.task('minify-js', function () { return gulp.src([PATHS.JS, '!./dist/**', '!.

1.1K6 0

gulp入门（小白级别）

b*.js']) //匹配所有js文件，但排除掉以b开头的js文件 gulp.src(['!...dist/avalon.js //有通配符开始出现的那部分路径为 **/underscore.js gulp.src('script/**/underscore.js') //假设匹配到的文件为...script/util/underscore.js .pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/util/underscore.js //有通配符出现的那部分路径为...文件结构现在，要将demo0927/demofile/file1 的所有文件都倒腾到 demo3927/destfile/file1中。...gulp'); gulp.task('default',function() { // 使用 ** 用来匹配所有的目录和文件。

1.3K2 0

第三方模块

Gulp使用使用npm install gulp下载gulp库文件在项目根目录下建立gulpfile.js文件重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件.../src/css/base.css') //将处理后的文件输出到dist目录 .pipe(gulp.dest('..../src/css/base.css') // 把处理后的文件输出到dist目录 .pipe(gulp.dest('....// html任务 // 1.压缩html文件里面的所有代码 // 2.抽取html文件里面的所有公共代码 gulp.task('htmlmin', done=> { // 获取当前目录下src...下所有的html文件 gulp.src('.

6544 0

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

不卖关子了，思路如下：新建一个文件夹，将引用的文件复制到另外的目录。（保持原bower包中的目录层级）修改项目中的引用到新的文件夹拷贝路径下。...全局安装 gulp： $ npm install --global gulp 作为项目的开发依赖（devDependencies）安装： $ npm install --save-dev gulp...在项目根目录下创建一个名为 gulpfile.js 的文件。将以下代码粘贴复制进去。 const gulp = require('gulp');//1....jquery.min.js", "bootstrap/dist/js/bootstrap.min.js" ]; //在复制之前先清空生成目录 gulp.task('clean:all', function...运行后，需要复制的Bower包文件和文件夹就会复制到wwwroot\lib文件夹下。如图： ? 将bower包安装文件夹排除到项目外。更新项目中现有文件的引用到lib目录下。

1.4K1 0

博客优化小记

升级NexT就比较操蛋了，theme 文件是以源代码的形式从 GitHub 上 clone 下来的，没有在原本版本升级的办法。...Hexo博客Next主题SEO优化方法静态文件cdn加速我对博客的一个重要要求，就是访问速度，所有容易拖累访问速度的功能都要思考一下是否必要。...'); var htmlclean = require('gulp-htmlclean'); // 压缩 public 目录 css function css() { return gulp.src.../public')); } // 压缩 public 目录 html function html() { return gulp.src('..../public')) } // 压缩 public/js 目录 js function js() { return gulp.src('.

4832 0

postcss-lazysprite: 一种生成CSS 雪碧图的懒惰姿势

/dist/img/'), gulp.dest('....，去褒贬来衬托我这个插件并不是本文的目的。...假设你的项目目录如下： . ├── gulpfile.js ├── dist └── src ├── css │ └── index.css ├── html │.../test/dist/css')); }); 上面的每个option 解释下： imagePath：雪碧图小图所在目录； stylesheetInput：CSS 文件所在的目录，一般与gulp.src.../dist/slice'定义的目录下的子目录，这个目录下的所有雪碧图小图会合成为一张雪碧图，图片名称默认是以filetype.png命名。

1.7K9 0

webpack3.x文件配置

文件中的所有依赖包文件优点：省事儿方便，一条命令一部到位。...clean-webpack-plugin'); console.log("======动态ip地址========= ：" + ip.address()) // 这个插件不在 Webpack 1.x 中，所以我们需要将这个文件复制到我们的项目里...+ "/app.js"),//项目的入口文件 app.js vendor: ['vue', 'vue-router', 'vuex'],//公共模块的集合 }, output.../dist"), publicPath: './', //这里必须是反斜杠且devServer.proxy.target必须存在，不然到时候index.html script src路劲会找不到...[contenthash:5].css", { allChunks: false /*是否将分散的css文件合并成一个文件*/ }), new webpack.NoErrorsPlugin

8082 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭