Gulp 前端优化
- 下载 node.js , https://nodejs.org/en/,并安装 msi
- 一下命令都属于 dos 命令
- node -v,npm -v,检验是否下载成功(出现版本号)
- 将 npm 镜像到淘宝 npm install cnpm -g --registry=https://registry.npm.taobao.org
- 然后用 cnpm 代替 npm使用
- 原因是 npm 是国外服务器
- 安装 gulp 到全局 cnpm install gulp -g
- 检验安装 gulp -v
- 切换到 文件项目目录下,cnpm install gulp --save-dev
- 安装插件:插件很多,
- cnpm install gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
- 在项目根目录创建gulpfile.js文件
var gulp = require('gulp');
gulp.task('default', function() {
console.log('hello world');
});运行gulp,检验- 使用数组的方式来匹配多种文件, 可以用正则和!,
具体代码
//var gulp = require('gulp');
//
//gulp.task('default', function() {
// console.log('hello world');
//}); // 引入 gulp及组件
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'), //压缩css
//jshint = require('gulp-jshint'), //js代码校验
uglify = require('gulp-uglify'), //压缩JS
imagemin = require('gulp-imagemin'), //压缩图片
rename = require('gulp-rename'), //合并js文件
// concat = require('gulp-concat'), // 将多个文件合并为1个
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del'); // Styles
gulp.task('styles', function() {
return gulp.src('src/styles/**/**/**/**/**/**/**/**/**/*.css')
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({ message: 'Styles task complete' }));
}); // Scripts
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/**/**/**/**/**/**/**/*.js')
//.pipe(jshint('.jshintrc'))
// .pipe(jshint.reporter('default'))
// .pipe(concat('main.js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
}); // Images
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
}); // Clean 任务执行前,先清除之前生成的文件
gulp.task('clean', function(cb) {
del(['dist/**/**/**/**/**/**/*'], cb)
}); // Default task 设置默认任务
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
}); // Watch 监听
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/**/**/**/**/**/**/**/**/**/*.css', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/**/**/**/**/**/**/**/**/**/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/**/**/**/**/**/**/**/**/**/*', ['images']);
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed); });
Gulp 前端优化的更多相关文章
- gulp 前端构建工具入门
gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...
- 【前端优化之渲染优化】大屏android手机动画丢帧的背后
前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程 ...
- 【前端优化之拆分CSS】前端三剑客的分分合合
几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试&l ...
- 关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)
本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...
- 关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)
Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...
- 关于大型网站技术演进的思考(十九)--网站静态化处理—web前端优化—上(11)
网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属 ...
- 【webapp的优化整理】要做移动前端优化的朋友进来看看吧
单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,weba ...
- nginx,控浏览器缓存,前端优化方案
1,困惑 做web项目,对于开发者来说,一个最头痛的问题就是浏览器缓存,有缓存,js更改了,html更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企 ...
- 【转】yahoo前端优化军规
雅虎给出了前端优化的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). Minimize HTTP Requests 减少http请求 图片.css ...
随机推荐
- CentOS 本地和网络yum源简单说明及配置
1.简述 Yellow dog Updater, Modified由Duke University团队,修改Yellow Dog Linux的Yellow Dog Updater开发而成,是一个基于R ...
- TensorFlow从1到2(二)续讲从锅炉工到AI专家
图片样本可视化 原文第四篇中,我们介绍了官方的入门案例MNIST,功能是识别手写的数字0-9.这是一个非常基础的TensorFlow应用,地位相当于通常语言学习的"Hello World!& ...
- JavaScript实现登录窗口的拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 广州三本找Java实习经历
前言 只有光头才能变强 这阵子跑去面试Java实习生啦~~~我来简单介绍一下背景吧. 广州三本大三在读,在广州找实习.大学开始接触编程,一个非常平庸的人. 在学习编程时,跟我类似的人应该会有一个疑问: ...
- 浅谈CSS3 box-sizing 属性 有趣的盒模型
盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是 ...
- HTML 练习on方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ArcMap插件开发初识:Add In
之前一直在做ArcEngine的相关开发,做的winform相关,新换了工作,又开始新的学习旅程! Add In 这个东西很早就知道有,但是一直没有用过,因为之前的公司有自己框架,接口,虽然我也是做插 ...
- openlayers4 入门开发系列之热力图篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- Git:九、删除项目
1.删除远程仓库 1)打开有绿色客隆按钮的仓库代码页面,选择Settings 2)把页面拉到最下边 2.删除本地仓库 1)先删.git隐藏文件 2)强行删除仓库文件夹 显示所有文件,包括隐藏的:ls ...
- Windows 10-限制Windows更新上传带宽
Windows Update Delivery Optimization可帮助您更快,更可靠地获取Windows更新和Microsoft Store应用程序. Windows Update Deliv ...