使用方法:
    1. 下载 node.js , https://nodejs.org/en/,并安装 msi
      1. 一下命令都属于 dos 命令
      2. node -v,npm -v,检验是否下载成功(出现版本号)
    2. 将 npm 镜像到淘宝 npm install cnpm -g --registry=https://registry.npm.taobao.org
      1. 然后用 cnpm 代替 npm使用
        1. 原因是 npm 是国外服务器
    3. 安装 gulp 到全局 cnpm install gulp -g
      1. 检验安装 gulp -v
      2. 切换到 文件项目目录下,cnpm install gulp --save-dev
    4. 安装插件:插件很多,
      1. 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
    5. 在项目根目录创建gulpfile.js文件
    6. var gulp = require('gulp');
      gulp.task('default', function() {
      console.log('hello world');
      });
      运行gulp,检验
      • 使用数组的方式来匹配多种文件, 可以用正则和!,

      具体代码

    1. //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 前端优化的更多相关文章

  1. gulp 前端构建工具入门

    gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...

  2. 【前端优化之渲染优化】大屏android手机动画丢帧的背后

    前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程 ...

  3. 【前端优化之拆分CSS】前端三剑客的分分合合

    几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试&l ...

  4. 关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

    本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...

  5. 关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)

    Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...

  6. 关于大型网站技术演进的思考(十九)--网站静态化处理—web前端优化—上(11)

    网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属 ...

  7. 【webapp的优化整理】要做移动前端优化的朋友进来看看吧

    单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,weba ...

  8. nginx,控浏览器缓存,前端优化方案

    1,困惑 做web项目,对于开发者来说,一个最头痛的问题就是浏览器缓存,有缓存,js更改了,html更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企 ...

  9. 【转】yahoo前端优化军规

    雅虎给出了前端优化的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). Minimize HTTP Requests 减少http请求 图片.css ...

随机推荐

  1. CentOS 本地和网络yum源简单说明及配置

    1.简述 Yellow dog Updater, Modified由Duke University团队,修改Yellow Dog Linux的Yellow Dog Updater开发而成,是一个基于R ...

  2. TensorFlow从1到2(二)续讲从锅炉工到AI专家

    图片样本可视化 原文第四篇中,我们介绍了官方的入门案例MNIST,功能是识别手写的数字0-9.这是一个非常基础的TensorFlow应用,地位相当于通常语言学习的"Hello World!& ...

  3. JavaScript实现登录窗口的拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 广州三本找Java实习经历

    前言 只有光头才能变强 这阵子跑去面试Java实习生啦~~~我来简单介绍一下背景吧. 广州三本大三在读,在广州找实习.大学开始接触编程,一个非常平庸的人. 在学习编程时,跟我类似的人应该会有一个疑问: ...

  5. 浅谈CSS3 box-sizing 属性 有趣的盒模型

    盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是 ...

  6. HTML 练习on方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. ArcMap插件开发初识:Add In

    之前一直在做ArcEngine的相关开发,做的winform相关,新换了工作,又开始新的学习旅程! Add In 这个东西很早就知道有,但是一直没有用过,因为之前的公司有自己框架,接口,虽然我也是做插 ...

  8. openlayers4 入门开发系列之热力图篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. Git:九、删除项目

    1.删除远程仓库 1)打开有绿色客隆按钮的仓库代码页面,选择Settings 2)把页面拉到最下边 2.删除本地仓库 1)先删.git隐藏文件 2)强行删除仓库文件夹 显示所有文件,包括隐藏的:ls ...

  10. Windows 10-限制Windows更新上传带宽

    Windows Update Delivery Optimization可帮助您更快,更可靠地获取Windows更新和Microsoft Store应用程序. Windows Update Deliv ...