先要安装nodejs,初始化项目配置文件package.json,根据情况输入配置参数 npm init test command: git repository: keywords: author: license: (ISC) About to \test03\package.json: { "name": "test03", "version": "1.0.0", "description": &qu…

<Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成压缩工作. 所有的 gulp 代码编写都可以看做是将规律转化为代码的过程. 规律 找到 js/ 目录下的所有 js 文件,压缩它们,将压缩后的文件存放在 dist/js/ 目录下. gulp 代码 你可以 下载所有示例代码 或 在线查看代码 建议:你可…

使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成压缩工作. 所有的 gulp 代码编写都可以看做是将规律转化为代码的过程. 规律 找到 js/ 目录下的所有 js 文件,压缩它们,将压缩后的文件存放在 dist/js/ 目录下. gulp 代码 建议:你可以只阅读下面的代码与注释或同时阅读代码解释 gulp 的所有配置代码都写在 gulpfile…

最近做的前端项目中发现引用的js包太多,导致页面加载时反应很慢,所以首先想到的是将js和css压缩,提高加载速度. 我们先来看看抓到的当前页面响应时间: 页面异步加载,需要响应时间 7.41秒,这也太慢了,实在受不了了. 下面我们引入gulp 对js做压缩,gulp是基于Node.js的前端构建工具.所以首先需要安装nodejs ,因为我的项目本身就是node项目,所以直接装gulp就好.全局安装gulp,命令如下 npm install -g gulp 需要安装的依赖项下面这些,依次安装就好了…

我们在写出来的代码都是非常规范的,改换行的时候就换行,改tab 的时候就有tab,还有这样做是为了后期维护方便,但是这也导致了内存占用量的增大,当把把代码发到线上,如果网速慢一点,可能很久都加载不出来,当然现在解决的办法也有很多,比如CDN 托管,缓存机制等.前端能做的还是以压缩代码为主. 现在压缩代码的工具有很多,比如webpack,但是配置起来要麻烦一些,那我采用的就是gulp来压缩代码 首先要安装依赖 npm install gulp -g //全局安装 npm install gulp…

输出 gulp-uglify 压缩js文件时报错信息 gulp.task('es6', function () { return gulp.src('src/main/webapp/bower_components/**/*.js') // 加return,finish后马上结束,但显示总时间长 .pipe(uglify()) .on('error', createErrorHandler('uglify')) .pipe(gulp.dest('src/main/webapp/build'));…

1.安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 2.查看nodejs的版本号 3.npm的版本号 4.定位目标 5.全局安装gulp 6.新建package.json文件 多了两个文件 7.本地安装gulp插件 8.新建gulpfile.js文件(重要) var gulp = require('gulp'),     uglify = require('gulp-uglify');   gulp…

前提需要安装nodejs 一. 全局安装Gulp npm install -g gulp 二.新建一个 gulpfile.js 文件 chapter2└── gulpfile.js 三.在 gulpfile.js 中编写代码 // 获取 gulpvar gulp = require('gulp')require() 是 node (CommonJS)中获取模块的语法. 在 gulp 中你只需要理解 require() 可以获取模块. 四.获取 gulp-uglify 组件 // 获取 uglif…

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. gulp 代码 当熟悉 使用 gulp 压缩 JS的方法后,配置压缩 CSS 的 gulp 代码就变得很轻松. 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切…

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下. gulp 代码 一.安装 gulp-imagemin 模块 提示:你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作. 在命令行输入 npm install gulp-imagemin…