首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用gulp创建.js,.min.js和.js.map文件?

使用gulp创建.js、.min.js和.js.map文件可以通过以下步骤完成:

  1. 首先,确保已经安装了Node.js和npm(Node.js的包管理器)。
  2. 在项目根目录下创建一个新的文件夹,并在命令行中导航到该文件夹。
  3. 在命令行中运行以下命令,以初始化一个新的npm项目:
代码语言:txt
复制
npm init

按照提示填写项目信息,生成一个package.json文件。

  1. 接下来,安装gulp和相关插件。在命令行中运行以下命令:
代码语言:txt
复制
npm install gulp gulp-uglify gulp-sourcemaps --save-dev

这将安装gulp、gulp-uglify(用于压缩.js文件)和gulp-sourcemaps(用于生成.js.map文件)插件,并将其添加到package.json文件的devDependencies中。

  1. 在项目根目录下创建一个名为gulpfile.js的文件,并在其中编写gulp任务。示例代码如下:
代码语言:txt
复制
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('build', function() {
  return gulp.src('src/*.js')
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist'));
});

上述代码定义了一个名为build的gulp任务,该任务将src文件夹中的所有.js文件进行压缩,并生成对应的.min.js文件和.js.map文件,然后将它们保存到dist文件夹中。

  1. 在命令行中运行以下命令,以执行gulp任务:
代码语言:txt
复制
gulp build

执行完毕后,你将在dist文件夹中看到生成的.js、.min.js和.js.map文件。

这是使用gulp创建.js、.min.js和.js.map文件的基本步骤。根据具体需求,你可以根据gulp的插件生态系统中的其他插件来扩展和定制这个过程。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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 文件,现在我们想要创建一个任务来压缩还没有被压缩的文件,我们需要先匹配目录下所有的...JavaScript 文件,然后排除后缀为 .min.js文件: gulp.src(['js/**/*.js', '!

81610
  • 博客优化小记

    趁着周末把博客优化了一下,主要优化以下几点: 阅读统计访客统计 添加评论 升级hexo版本NexT版本 配置SEO 静态文件cdn加速 使用gulp压缩文件 添加lazyload 添加站内搜索 阅读统计访客统计...这次添加功能引入了不蒜子 valine,使用 chrome 可以看出这两个 js 文件的加载速度不快。 ? 所以我把这两个文件单独复制出来,上传到七牛云里,并在博客里引用七牛云的链接。...http://cdn.chaohang.top; } 把 /cdn 目录下的请求全部转发到 cdn.chaohang.top 这个子域名下,比如: https://chaohang.top/cdn/min.js...会被转发至 http://cdn.chaohang.top/cdn/min.js 这样子就可以成功绕过浏览器的限制了,因为实际的请求是通过服务器代理的。...('default', gulp.series(gulp.parallel('html', 'css', 'js'))); 在生成代码文件后,使用 gulp 命令压缩文件: hexo g gulp 添加

    49920

    基于gulp的前端自动化方案

    实践 创建项目目录 首先初始化npm依赖项与基本信息,使用命令npm init一直回车,生成package.json文件,也可以直接去上边github仓库目录下载。...你的项目目录关系到你的gulp脚本里的任务路径,我脚本里写的是匹配所有的目录和文件。我简单举个例子:这里js/common里的js文件也会被处理。如果只想处理特定目录的文件,请修改任务里的路径。..."gulp-uglify": "^2.0.0", "uglify-js": "^3.3.9" } } 编写gulp脚本 新建 gulpfile.js文件,并引入所需模块,这里我把路径统一写在...{png,jpg,gif,ico}', JS: '**/*.js' } 压缩处理css 这里需要排除node_modules文件生成构建的后的目录/dist/及它们的子目录,直接 !...同理排除下 min.js ,这里还要注意记得把 gulp脚本也排除不处理。

    1.1K60

    在 ASP.NET Core 项目中使用 npm 管理你的前端组件包

    当示例项目创建完成后,会自动在项目中引用 bootstrap jquery,所以,我们就在这个项目的基础上,尝试采用 npm 来管理我们的前端组件包。   ...通过使用 gulp.js,我们就可以自动的执行移动文件,打包压缩 js、css、image、删除文件等等,帮我们省了再通过 bundle 去打包压缩 css js 文件的过程。   ...gulp 组件包之后,在我们的项目根路径下创建一个 gulpfile.js 文件文件的内容如下所示。...= paths.js + "**/*.min.js";//匹配所有 js 对应压缩后的文件所在路径 paths.concatJsDist = paths.js + "app.min.js";//将所有的...(".")); }); //每一个 js 文件压缩到对应的 min.js gulp.task("min:js", () => { return gulp.src([paths.jsDist,

    1.9K30

    构建工具Gulp-lesson1

    文件处理: 每一个构建任务我们默认定义到 gulpfile.js 文件中,通过执行 gulp --tasks 可以查看到当前所定义的公共任务任务列表,通过执行 gulp 即可执行我们对外暴露的公共任务。...src 函数 dest 函数: gulp 对外暴露的 src 函数 dest 函数对应就是我们待处理文件的入口处理完成后文件的出口。...通过下面的代码指定了要编译的文件是当前目录下 src 内的 js 文件: const { src, dest } = require('gulp'); exports.default = function.../')); } 接着添加文件: 当我们在一个任务中进行了一部分的转换后,我们还可以安装一节管道来再次使用 src 函数导入部分文件来,一开始处理的 src/js 后添加的vendor/.js 中的文件内容都会经过后面的管道进行处理...('output/')) .pipe(uglify()) .pipe(rename({ extname: '.min.js' })) .pipe(dest('output/'))

    34210

    浏览器端JS创建和下载文件

    浏览器端JS创建和下载文件 1 需求 前端需要把获取的数据生成文件让用户下载,按照以往生成 a 标签 href 指向目的文件,不仅需要有已经生成的文件服务器路径,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载...2 解决方案 2.1 下载取代加载:H5标签属性 HTML5 中 a 标签增加了 download 属性,点击链接时浏览器不会打开链接指向的文件,而是改为下载(目前只有chrome、firefoxopera...支持),下载时会直接使用链接的名字来作为文件名(可给 download 加上文件名进行修改,如: download=“file.js”) 2.2 生成文件:DataURI js将内容生成文件可以仿照图片...,可用浏览器新API(URL.createObjectURL)来解决,URL.createObjectURL 通常用来创建图片 DataURI 显示图片,这里用来下载文件,参数是 File对象(通过input...[type=file]选择的文件)或 Blob 对象(二进制大对象),让浏览器自动设定文件类型 解决类型限制: content 创建 ObjectURL 并赋值给 aLink 即可解决文件类型的限制

    4.8K120

    Gulp开发教程(翻译)

    前端开发工程师还可以自己熟悉的语言来编写任务去lint JavaScriptCSS、解析模板以及在文件变动时编译LESS文件(当然这些只是一小部分例子)。...首先创建一个名为gulpfile.js文件,这是定义Gulp任务的地方,它可以通过gulp命令来运行,接着把下面的代码放到gulpfile.js文件里面。...js目录下包含了压缩未压缩的JavaScript文件,现在我们想要创建一个任务来压缩还没有被压缩的文件,我们需要先匹配目录下所有的JavaScript文件,然后排除后缀为.min.js文件: gulp.src...js/**/*.min.js']) DEFINING TASKS gulp.task()函数通常会被用来定义任务。当你定义一个简单的任务时,需要传入任务名字执行函数两个属性。...当一个文件被修改或者Gulp任务被执行时可以Gulp来加载或者更新网页。

    86140

    Gulp探究折腾之路(I)

    (outPut)); }); 在gulpfile.js同级目录运行gulp scripts即可;PS:当然前提是您已经安装了nodejs,并且使用npm安装了代码中需要的插件gulpgulp-uglify...js目录下包含了压缩未压缩的JavaScript文件,现在我们想要创建一个任务来压缩还没有被压缩的文件,我们需要先匹配目录下所有的JavaScript文件,然后排除后缀为.min.js文件: gulp.src...js/**/*.min.js']) 使用gulp-jshint() 好吧,不同帮派,不同侠士,对于代码的输出是不一致的。而这JS又没像Py那般天生带有美丽的基因。...使用gulp-load-plugins模块,可以加载package.json文件中所有的gulp模块。上面的代码gulp-load-plugins模块改写,就是下面这样。...LiveReload结合了浏览器扩展(包括Chrome extension),在发现文件被修改时会实时更新网页。它可以gulp-watch插件或者前面描述的gulp-watch()函数一起使用。

    1.8K80

    浏览器端JS创建和下载文件 【原创】

    浏览器端JS创建和下载文件 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian...Email: sunjianfeng@csxiaoyao.com QQ: 1724338257 目录导航 浏览器端JS创建和下载文件 1 需求 2 解决方案 2.1 下载取代加载...,而是改为下载(目前只有chrome、firefoxopera支持),下载时会直接使用链接的名字来作为文件名(可给 download 加上文件名进行修改,如: download=“file.js”)...[type=file]选择的文件)或 Blob 对象(二进制大对象),让浏览器自动设定文件类型 解决类型限制: content 创建 ObjectURL 并赋值给 aLink 即可解决文件类型的限制...【By CS逍遥剑仙】 未经允许不得转载:禅林阆苑 » 浏览器端JS创建和下载文件 【原创】

    2.3K70

    ASP.NET5之客户端开发:GruntGulp构建工具在Visual Studio 2015中的高效的应用GruntGulp使用Grunt准备项目配置NPM配置Grunt集成起来监测文件变化与V

    GruntGulp都在Visual studio 2015中得到支持。ASP.NET 项目模板默认使用Gulp。 GruntGulp GruntGulp有什么区别?...:一个压缩缩小文件尺寸的任务 grunt-contrib-watch:一个检测文件活动的任务 准备项目 首先,创建信的空的Web应用程序添加示例的Typescript文件,Typescript文件在...使用Gulp 除了一些著名的不同以外,Gulp的配置文件grunt的非常相似,下文中的例子对比grunt的示例但是使用gulp包和约定。...示例的不同 取代gruntfile.js,添加一个命名为gulpfile.js文件,在这个文件中,使用node.js的方法require()为下文中的几个变量赋值 var gulp = require...({ extname: '.min.js' })) .pipe(gulp.dest('wwwroot/lib')) }); watch

    3K70
    领券