gulp打包给文件添加 hash 之后，怎么替换其他文件中引用的js（或者css），要替换成打包以后的带有 hash 的那一个文件。...import a from 'a'; import b from 'b'; console.log(a) console.log(b) 三个js文件都需要打包并添加hash值。...那么打包后的main.js中的 import 的内容依旧是原来的。.../src/*js']) .pipe(gulp.dest('dist')) // 将源文件拷贝到打包目录 .pipe(rev()) .pipe(gulp.dest('dist...')) // 将生成的hash文件添加到打包目录 .pipe(rev.manifest('js-rev.json')) // 生成映射文件 .pipe(gulp.dest('dist
本文链接：https://blog.csdn.net/daoer_sofu/article/details/89856723 gulp gulp.src 文件输入 gulp.dest 文件输出 gulp.task...建立任务，参数（名称，函数） gulp.watch 监控文件变化 gulp+browserify配置nodejs转chrome代码 gulp和webpack的区别 gulp前端打包、webpack...模块打包、entry输入、output输出 webpack loader：函数预处理，不同类型文件使用不同loade打包r，file-loader(生成md5)、html-loader plugin：...source-map： 产生.map文件 cheap： 不包含列信息（代码精确到列的位置信息)也不包含loader的sourcemap module： 包含loader的sourcemap（比如jsx to js.../node_modules/webpack/bin/webpack.js --inline --progress 问题 webpack打包缺少模块，externals可以解决，或者坑能是node_modules
gulp插件（也是此次打包主要用的gulp插件），而下篇主要以一个demo项目为例，从本地checkout出合适的git版本，压缩、合并、到最后打成zip包，发送至指定目录，做一个全面的演示。...的js文件，如果两个都含有同一任务，不特殊说明的话，命令行只执行文件名为gulpfile.js的任务），在命令行输入 npm install gulp --save-dev（之前没有安装过gulp的话...之后所有的gulp插件都以此方式安装，即npm install xx --save-dev gulp插件详细介绍 按照实际的打包顺序， 我依次会介绍gulp-git、gulp-htmlmin、gulp-uglify...gulp-concat 合并代码，即将项目中各种JS合并成一个JS文件。一般与压缩连用，代码演示参考上方。 gulp-ng-annotate 如果不是angular框架，可以忽略。。。。...在打包JS的时候，往往压缩、合并是连着用的，即参考上方‘compress’的示例代码。
https://blog.csdn.net/j_bleach/article/details/53053500 打包流程简介 本次打包大致过程是checkout出想要打包的git版本（可以是...}); 压缩合并JS gulp.task('js', function (done) { return gulp.src(config.input.js) .pipe(ngAnnotate...js', function (done) { gulp.src(config.input.js) .pipe(ngAnnotate({single_quotes: true})) ....清理dist目录 写到这里，还有一个问题，就是没有对文件夹进行清理，这也是比较重要的，在每一次开始打包工作之前，我们需要清理dist目录，以保证下一次打包不会被上一次打包的文件“污染”。...这里用到gulp-del的插件，代码如下： gulp.task('clean',function(){ return del(config.output.dist); }) 完整打包review 经过以上
前言 gulp 是一个前端项目开发的自动化打包构建工具, 类似的打包工具还有webpack。...npm init -y package.json内容 gulpfile.js 文件需要自己在项目根目录下新建，整个目录结构如下 使用 gulp 压缩 JS 压缩 js 代码可降低 js 文件大小，提高页面打开速度...// 导入gulp-uglify // 创建压缩任务 gulp.task('js', function() { // 1....另存到dist压缩后的文件 .pipe(gulp.dest('dist/js')) }) 执行命令 > gulp js src/js/ext.js 原始的代码如下 压缩后的代码 gulp...', gulp.series(['js', 'html'])); 于是只需要执行gulp目录就可以执行全部了
可以使用前端的工具来对blade,css,js进行压缩吗？当然，gulp可以做到。 gulp是什么？ 看完你就明白，这是个自动化构建工具的核心就是gulpfile.js。...': 'js', } } )) .pipe(gulp.dest(dist)...最后附上gulpfile.js的代码： var gulp = require('gulp');var uglify = require('gulp-uglify');var rev = require(...;var htmlmin = require('gulp-htmlmin');var paths = { css: "css/*.css", js: "js/*.js", html...function() { //- 创建一个名为 concat 的 task return gulp.src(paths.js) /
gulp 是一个流行的 JavaScript 流的构建工具，可以帮助我们自动化这个过程， 相比webpack， 我个人觉得gulp是一个较为轻量的打包工具了。...本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。安装 gulp在开始之前，请确保已经安装了 Node.js，这里不介绍如何安装node。...() {return gulp.src('js/main.js') .pipe(uglify()) .pipe(gulp.dest('dist/js')) .pipe(browserSync.stream...gulp.watch('js/main.js', gulp.series("js"));});// 默认任务gulp.task('default', gulp.series('html', 'css'...您可以在 css 和 js 文件夹中添加或修改文件，Gulp 将自动检测并重新打包它们。
安装依赖 // npm npm i --save-dev gulp-preprocess // yarn yarn add -d gulp-preprocess 获取本地IP const os =...配置 const preprocess = require('gulp-preprocess') const ENV = process.env.NODE_ENV || 'dev' // 获取环境变量.../getLocalHost.js') function JS(){ return src('..../index.js') .pipe(preprocess({ context: { NODE_ENV: EVN_TYPE, URL: getLocalHost() } }))...// 设置源码内变量 .... } js 配置 { // 默认地址 baseUrl: '/', // 开发地址
webpack 本身就是为了打包js所设计，作为第一节，介绍怎么打包js。 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD。...创建vendor文件夹，其中minus.js、multi.js和sum.js分别用 CommonJS、AMD 和 ES6 规范编写。...: path.resolve(__dirname, "dist"), // 打包文件的输出目录 filename: "bundle.js" } }; 注意output.publicPath...收尾 打包后的js文件会按照我们的配置放在dist目录下，这时，需要创建一个html文件，引用打包好的js文件。...然后在 Chrome 打开(这节课只是打包js,不包括编译es6)，就可以看到我们代码的运行结果了。 4. 更多 本节的代码地址：>>> 点我进入 项目的代码仓库：>>> 点我进入
toc AngularJS项目中js众多，上线的时候压缩合并下还是很有必要的^_^ 在此之前如果不了解gulp，推荐访问Gulp开发教程（翻译）。...的插件，因此顺理成章： var gulp = require('gulp'); var ngAnnotate = require('gulp-ng-annotate'); var gutil = require...('gulp-concat'); var minifyCss = require('gulp-minify-css'); var rename = require('gulp-rename');...'); gulp.task('minify', function() { return gulp.src(['js/appService.js','js/app.js']) //注意...')) .pipe(gulp.dest('js/')) });
": "^1.1.0" } } gulpfile.js var gulp = require('gulp'), jade = require('gulp-jade'), browserify....jade') .pipe(jade()) .pipe(gulp.dest('builds/development')) }) gulp.task('js', function...() { return gulp.src('src/js/main.js') .pipe(browserify({debug: true})) .pipe(gulp.dest.../main.js') $ gulp jade [21:35:30] Using gulpfile ~/17lai/frontend-workflow/gulpfile.js [21:35:30] Starting.../gulpfile.js [21:35:56] Starting 'js'... [21:35:56] Finished 'js' after 84 ms gulp API 文档 http://www.gulpjs.com.cn
使用gulp实现 首先安装gulp,gulp-ssh这两个包 npm install gulp gulp-ssh -D 在项目根目录下新建gulpfile.js文件 删除服务器上已经存在的文件夹 /*...return gulpSSH.shell(config.commands, { filePath: 'commands.log' }) .pipe(gulp.dest('logs')) }) 打包上传...done(); }, 2000) })) 注意在这里遇到一个坑，如果使用的是gulp4以上版本，打包命令可按照上面的方法写，如果是gulp4以下版本，按照下面的方法写 gulp.task('deploy...deploy" }, 使用 执行打包的时候运行 npm run deploy:test 这样就会先去打包，然后将打包的文件上传至服务器 总结 目前只是使用gulp简单的实现了一下，如果想搭建完整的自动构建...，打包，回滚，监控等可以使用jetkins 本文首发于: 利用Gulp实现前端打包自动上传服务器
---- 安装 Gulp.js Gulp.js 是基于 Node 的构建工具，类似 Grunt, 要使用它，你的机器上需要装有 Node.js。...gulp.task('default', ['js']); 完整的 gulpfile.js: // 定义依赖项和插件 var gulp=require('gulp'), gutil=require...gulp.task('js', function(){ gulp.src('..../js')); }); // 定义默认任务 gulp.task('default', ['js']); 回到命令行（项目根目录），输入 gulp, 回车。.../js/*.js', ['js']); 这行代码执行时， Gulp 会持续监控 ./js/ 目录下所有的 js 文件，一旦文件发生变化，就会自动重新执行 "js" 任务来合并和压缩文件。
基于Node.js的自动化工具Gulp What is gulp?...gulp的使用 1.建立gulpfile.js文件 gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。...工作方式 在介绍gulp API之前，我们首先来说一下gulp.js工作方式。...].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js 获取流 gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(...var gulp = require('gulp'); gulp.src('script/jquery.js') // 获取流 .pipe(gulp.dest('dist/foo.js
使用gulp能完成以下任务： 压缩html、css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 2.gulp构建 前端构建流程： 开发->分析->测试->编译->发布部署...一段简单的基于gulp的项目构建代码，gulpfile.js内容如下所示: gulp.task('default',function(){ return gulp .src("*.../build/')) }) 上面gulp配置完成的内容是： 1.将目录下所有的以.js结尾的文件 2.执行jshint代码检查 3.然后concat合并为一个文件， 4.再使用uglify...// 合并文件模块 var concat = require('gulp-concat'); //less编译模块 var less = require('gulp-less'); //压缩js...'); //jshint检查js静态语法检查 var jshint = require('gulp-jshint'); 3.gulp打包 因为项目中使用bower进行类库的管理，所以在项目打包的过程，
g 全局安装gulp gulp --help 返回帮助信息 package.json npm init 初始化npm npm install gulp gulp-util...--save-dev //从本地把整个gulp文件夹拉过来 task 创建gulpfile.js文件 var gulp=require('gulp'); gulp.task('hello',...save-dev gulp.task('myjs', function () { return gulp.src(['js/a.js','js/b.js']).pipe(concat(‘ab.js’.../xiangmu/js'); }); Js压缩文件 npm install gulp-uglify --save-dev gulp.task('uglifyjs', function(){ gulp.src...('js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js')) }); Css文件压缩 npm install gulp-minify-css --save-dev
首先，gulp的源码里没有任何一部分是定义pipe的。 gulp的pipe方法是来自nodejs stream API的。 gulp本身是由一系列vinyl模块组织起来的。...pipe跟他字面意思一样只是一个管道 例如我有一堆文件 var s = gulp.src(["fileA","fileB","fileC"]) src方法实际上是'vinyl-fs'模块的方法,选择一系列文件并创建可读流...这里面的思想跟可以阅读参考资料 http://www.zhangxinxu.com/wordpress/2013/02/js-currying/ http://www.cnblogs.com/kunhu...方法只负责返回这个管道结构（Stream对象） 楼主想要窥探管道里的内容，就要创建一个Stream对象，在Stream对象接收结果的方法里把流里的内容log出来即可 Stream与File 注意的是gulp...里的流的file必须是vinyl对象 var File = require("gulp-utils").File //或者 var File = require("vinyl") var myf =
Node.js 是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。...JXcore 是一个支持多线程的 Node.js 发行版本，基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 这篇文章主要是要向大家介绍 JXcore 的打包功能。...root root 4096 Mar 21 06:10 scripts drwxr-xr-x 2 root root 4096 Feb 15 11:56 style 接下来我们使用 jx 命令打包以上项目...，并指定 index.js 为 Node.js 项目的主文件： $ jx package index.js index 以上命令执行成功，会生成以下两个文件： index.jxp 这是一个中间件文件，包含了需要编译的完整项目信息...---- 载入 JX 文件 Node.js 的项目运行： $ node index.js command_line_arguments 使用 JXcore 编译后，我们可以使用以下命令来执行生成的 jx
结构说明 assets 项目资源目录，dev 开发目录，dist 编译输出目录，gulpfile.js 自动化工具 API gulp 的使用 安装 node 环境 (自行 goole 即可) 全局安装...gulp $ npm install gulp -g 进入到需要 gulp 管理的项目路径，如 /gulp 再安装一遍 $ npm install gulp --save-dev 安装 gulp 插件...gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del sass的编译 (`gulp-ruby-sass`) 自动添加...css前缀（`gulp-autoprefixer`） 压缩css（`gulp-minify-css`） js代码校验（`gulp-jshint`） 合并js文件（`gulp-concat`） 压缩js代码...运行 task 任务 $ gulp 监听文档实现实时编译 $ gulp watch gulp 的 API 请查看 gulpfile.js 文件 scss 文件规范以及说明 各个小模块以下划线开头全小写命名
gulp 打包 requirejs 目前我的项目是一个页面一个 js 入口，比如登录页面的入口是 login.js，而主页面的入口是 home.js，它们都是在同一个目录下。.../widget' } }; 接下来就是使用 gulp 对 js 文件进行打包，用到的是「gulp-requirejs-optimize」，由于项目是多入口文件，所以需要批量打包，打包的代码如下：...:dist', 'rev:css', cb ); }); 第三个步骤是 js 文件的打包，打包 RequireJs 代码可以根据依赖进行 js 文件的合并压缩...，最终每个页面都打包一个 js 文件为单入口。...// 打包 js 文件 gulp.task('build:js', function(cb) { runSequence( 'requirejs', 'uglify
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
