导航:首页 > 文件处理 > gulp压缩教程

gulp压缩教程

发布时间:2024-03-23 22:27:54

❶ gulp压缩怎么排除node

通过 gulp.src([...])来控制。

['./**/*.js','!./node_moles/**']
不过一般都是按文件夹来的,你写的js在哪一个文件夹就指向哪一个文件夹:
比如js文件都 myScript/**/*.js ,则:
gulp.src(['./myScript/**/*.js'])
....

❷ gulp执行压缩时很慢怎么实现

1、在任务管理器中(ctrl+alt+delete),选性能,看卡住的时候哪些程序内存占用过多,cpu使用率过高,内存过多的话,上网查一下是什么进程,可结束的就结束程序。cpu过高,可试试换操作系统。还可在事件查看器中看系统经常报什么错,看能否找出问题。2、W7系统,可下载W7优化大师,优化一下。W8系统有W8优化大师,XP有优化大师。3、W7、W8:开始-运行(输入msconfig)-回车-引导---高级选项---勾选"处理器个数",选择最大核心数--勾选"最大内存"--确定。回到系统配置窗口-启动,保留杀毒软件和输入法,其它的全部禁用。4、用金山或者360卫士,在优化系统中打开开机加速,关闭一些你不需要开机启动的进程。5、进行磁盘碎片整理和磁盘清理。注意:W7不能压缩C盘来增大空间,否则无法启动。

❸ gulp压缩js的时候出现如下错误提示 events.js 141,求大神解答!

感觉上是你有代码在产生错误输出而且没有被处理。能把具体错误的那个文件的代码发一下吗?

❹ 为什么用gulp把多个js文件合并压缩后,再直接引入页面就报错了

合并成一个JS文件之后,代码的作用域扩大,难免会造成冲突。找到报错的代码所在位置,找到原JS文件修改下。
举个例子:a.js 中有var foo = 1; b.js 中也有 var foo = 10; 那么合并之后就会有两个 foo 变量, 这样一来在新的js文件中,foo的值就是写在后面的一个,而恰好后面的值会冲突报错。
因此,在合并之前需要确定每个js文件都能正常工作,而且没有函数、变量上的冲突。

❺ 前端构建工具Gulp.js 你知多少..(webpack/gulp/grunt)

@ TOC

阅读本文章之前,相信你已经对前端构建工具(webpack、gulp、grunt)有一定的认知和了解了,那么他们之间究竟有什么区别呢?

gulp文档上面有这么一句话 ,也就是说 gulp是一个自动化构建工具;
gulp的一些功能如下(包括但不限于):

其实Webpack和另外两个并没有太多的可比性

傻瓜式起步照搬官网文档
1.安装

2.在项目根目录下创建一个名为 gulpfile.js 的文件:

3.运行 gulp:

默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
具体详情可以查看 gulpjs.com文档

新建一个项目gulp-test
环境:

1.新建文件以下文件如下

其中 gulpfile.js 是我们gulp的配置文件,启动gulp默认会找个这个文件并执行;
2.接下来安装依赖

一直按回车Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁琐的enter步骤)
此时我们的目录结构是这样了

安装依赖

这里页面实时刷新只讲这个 gulp-connect ,其他详情可以参照 Browsersync 和文章 gulp-livereload

安装完依赖后配置gulpfile.js如下:

大概讲解一下gulpfile.js:

gulp.task 是gulp的api 定义一个使用 Orchestrator 实现的任务(task)
如上我们定义了 my-task-js my-task-css html clean default watch server 等任务,其中:

my-task-js 是将 符合所提供的匹配模式的js 进行检测(gulp-jshint)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/js目录下;

my-task-css 是将 符合所提供的匹配模式的sass进行编译(gulp-sass)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/css目录下;

html 是将 符合所提供的匹配模式的html进行监听,如果有变化则connect.reload()

clean 是如果任务重新启动时 删除旧文件;

default gulp默认启动的任务

watch gulp的api 监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射(emit) change 事件。

server 依赖gulp-connect启动一个服务器

配置完gulpfile.js之后,我们给js和css及html加点东西:

首先js/helloworld.js

css/index.scss

index.html

运行gulp

浏览器效果:

接下来我们修改helloworld.js来看看是否能实时刷新
修改如下:

按保存之后,终端给我们报了一个错:

查看js发现我们用了es6语法的声明语句 但当前gulp无法处理es6语法,有问题解决问题,es6=>es5

解决方案:
安装gulp-babel babel-core babel-preset-es2015

gulpfile.js修改如下:

运行

依然报上面的错;找了一些原因发现,虽然安装了相关依赖,却没有配置.babelrc文件,即babel还没转化es6

根目录添加.babelrc文件

重新运行:

查看dist下的js文件

改变helloworld.js检查页面是否刷新

保存,页面的天空蓝换成你们喜欢的yellow颜色

修改index.scss 查看是否会刷新页面

最后修改index.html 查看是否会刷新页面

今天主要学习了gulp的简单项目搭建及实时更新配置;其实gulp类似于grunt的弱化版,但更简单好用,只是插件会少一些,目前主流的项目搭建工具主要是webpack,但依然有不少项目还用着gulp或者grunt

扩展:

下面还有一些楼主的学习笔记:

有兴趣的可以多多交流@ 楼主博客

阅读全文

与gulp压缩教程相关的资料

热点内容
命令的几要素 浏览:932
代理服务器地址怎么知道 浏览:170
汉语命令形 浏览:193
ACG官网下载的游戏怎么解压 浏览:963
stata交叉项命令 浏览:470
程序员老公烫头 浏览:692
服务器文件地址格式 浏览:131
securecrtandroid 浏览:176
短字符串压缩 浏览:863
u盘插入后显示加密格式化 浏览:944
我的世界怎么用命令方块获得超级武器 浏览:382
狗语翻译器app链接怎么下 浏览:905
选择排序算法的流程图 浏览:881
如何对文件夹开启共享 浏览:527
常用的磁盘调度算法 浏览:662
怎么用返利app返利 浏览:127
java代码快速 浏览:243
单片机左移右移后是补1还是0 浏览:599
湛江一号命令 浏览:333
导出命令行 浏览:274