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 ...
随机推荐
- Java进阶篇设计模式之十二 ---- 备忘录模式和状态模式
前言 在上一篇中我们学习了行为型模式的策略模式(Strategy Pattern)和模板模式(Template Pattern).本篇则来学习下行为型模式的两个模式,备忘录模式(Memento Pat ...
- openlayers4 入门开发系列之批量叠加 zip 压缩 SHP 图层篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- Cesium 实现粒子效果贴地(伪)
有时我们面对这样的需求,需要在地面上放一个周期性放大缩小的标记,可以使用粒子效果实现,但是粒子效果图片很难贴地(如果你知道怎么做,欢迎分享,期待有人打我脸),我只能变通实现一个看似贴地但实际没有贴地的 ...
- 免费开源ERP-成功案例分析(1)
Odoo用户案例 Odoo用户概要 关于Odoo全球的用户,我们来看一些数据: Odoo目前全球有300万使用者 Odoo系统上每天新创建的数据库超过1000个 Odoo和Word.Excel.Pow ...
- 国内常用DNS
114.114.114.114 国内移动,电信,联通通用DNS 223.5.5.5 阿里 223.6.6.6 阿里 180.76.76.76 百度
- Python之路【第四篇】:Python基础之函数
函数的理解 面向过程:根据业务逻辑从上到下垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 函数作用是你的程序有良好的扩展性.复用性. 同样的功能要是用3次以上的话就建议使 ...
- windows凭据管理
解决windows凭据无法保存的问题1: 运行-gpedit.msc(组策略)-计算机配置-管理模板-系统-凭据分配 双击右侧”允许分配保存的凭据用于仅NTLM服务器身份验证“ 在弹出的窗口中选中“已 ...
- python3 发生器 迭代器 内置函数 协程 哈哈我又回来啦
唉 犯傻了,干了一件虽有一点点道理的事情,但是却完全没有效果,我是不是傻,浪费了这么多时间在一件不可能的事情上,果然效果比道理更重要... 被一些琐事耽搁几天,python的学习都给我停了,擦!不过一 ...
- JS INPUT输入的时候全角自动转为半角
function CtoH(obj){var str=obj.value;var result="";for (var i = 0; i < str.length; i++) ...
- CTF取证方法大汇总,建议收藏!
站在巨人的肩头才会看见更远的世界,这是一篇来自技术牛人的神总结,运用多年实战经验总结的CTF取证方法,全面细致,通俗易懂,掌握了这个技能定会让你在CTF路上少走很多弯路,不看真的会后悔! 本篇文章大约 ...