毕业到转行以来有一年时间了,成为一名程序猿也有大半年了,之前在新浪上随便写写简单的学习过程,感觉不够像那么回事,现在接触前端也有一段时间了,也做过几个项目,认识到可以拓展的实在太多了,希望从这里起步,踏踏实实,记录好点点滴滴。------HHL

Gulp使用步骤:

  1 安装node(npm),全局安装,我使用的是windows7

  2 全局安装gulp,npm install -g gulp

  3 搭建项目框架结构,建package.json,写上{}

    

    build为转化后存储的文件,src为自己的项目,即来源文件,gulpfile.js为操作代码,package.json为安装gulp及插件的信息

  4 在项目根目录以--save -dev来安装一堆你要用的,首先npm install --save-dev gulp必须的

  5 然后各种插件 npm install --save-dev gulp-less,npm install --save-dev gulp-watch......基本看名称就知道插件作用

    gulp-rename:重命名

    gulp-uglify:JS压缩

    gulp-minify-css/html

    gulp-concat:JS合并

    gulp-less/sass

    gulp-imagemin

    还有 browserify,livereload,browser-sync的使用

  6 API

    gulp.src(globs[,options]):路径(类似正则),参数:数据流(是吧?stream)

      部分:

      *:单字符串

      **:字符串、分隔符

      js/*/.js 匹配js目录及其子目录下所有后缀为.js的文件

      *.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件

      多种匹配模式下排除:gulp.src(['js/*.js','css/*.css','!reset.css']),排除reset.css

    gulp.dest(path[,options]):转化存储到

    gulp.task(name[,deps],fun):deps为先执行的任务,name为任务,在命令行输入:gulp name,就运行了

    gulp.watch(glob[,opts],tasks):监听文件变化

    .pipe:类似柯理化一样的那种函数连接

  7 参考文献

    http://www.cnblogs.com/tugenhua0707/p/5562548.html#_labe3

    http://www.w3ctech.com/topic/134

  . plugins

    替代繁琐的(例子):取代 var imagemin=require('gulp-imagemin');

    用:同样需要安装gulp-imagemin

      var gulp = require('gulp'),
      这个---gulpLoadPlugins = require('gulp-load-plugins'),
      这个---plugins = gulpLoadPlugins();

      路径....  

      gulp.task('images',function(){
        return gulp.src(paths.img + "**/*")  
        .pipe(plugins.imagemin())
        .pipe(gulp.dest(paths.build + "/images"));    
      });

    图片压缩效果:压缩效果太小,https://tinypng.com/,这个效果超好,可以图片选择这个压缩

      

Gulp-前端进阶A-1的更多相关文章

  1. gulp 前端自动化工具

    一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是 ...

  2. gulp前端自动化工作流

    gulp前端自动化工作流 为什么要有自动化的流程? 在我们的开发过程中有大量的重复操作 DRY Don't repeat yourself 开发人员的精力应放在哪? 创造,新的一切前端开发的编译操作 ...

  3. gulp前端自动化构建工具使用

    (1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...

  4. gulp前端自动化构建工具入门篇

    现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做 ...

  5. gulp前端自动化构建工具新手入门篇

    很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...

  6. Gulp前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp ...

  7. CSS系列——前端进阶之路:初涉Less

    前言:最近帮一个朋友解决点问题,在查看组件源码的时候涉及到了less语法,这可难倒博主了.没办法,既然用到就要学呗,谁让咱是无所不能的程序猿呢!所以今天来学习下Less,算是笔记,也希望给初学less ...

  8. 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯

    http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...

  9. 前端进阶试题(css部分)

    一.css 40分 1. 什么是盒模型? 答: 2. Doctype的几种类型? 答:①.过渡的:②.严格的:③.框架的 更多详细介绍参考:资料 3. 如何布局左不动右边自适应的两列布局? 答:两种简 ...

  10. 前端构建大法 Gulp 系列 (四):gulp实战

    前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...

随机推荐

  1. Codeforces Round #344 (Div. 2) B. Print Check

    B. Print Check time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  2. win7与virtualbox中centos文件共享

    1.首先在Windows下创建一个文件夹,用于存放共享的文件,例如 E:\share 2.将该文件夹设置为共享文件夹. 右击文件夹,选择共享->特定用户 选择Everyone->添加-&g ...

  3. 批量过滤POST GET数据

    if(get_magic_quotes_gpc()){ $_GET = stripslashes_array($_GET); $_POST = stripslashes_array($_POST); ...

  4. 学习angular.js的一些笔记想法(上)

    1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...

  5. wamp 中如何管理两个dedeCms站点

    本文以WampServer2.1为例,图文说明开启wamp虚拟主机功能,也就是绑定多域名,开启多站点搭建功能. 1.  我们一键安装wamp到E盘,并可以正常启动,状态如下图所示:  

  6. jQuery的XX如何实现?——2.show与链式调用

    往期回顾: jQuery的XX如何实现?——1.框架 -------------------------- 源码链接:内附实例代码 jQuery使用许久了,但是有一些API的实现实在想不通.于是抽空看 ...

  7. uGUI练习(二) Animate UI

    练习目标 通过Animation录制UI动画 一.步骤 1.创建一个Panel,下面再创建两个子Panel 2.修改Canvas的 Render Mode为Screen Space-Camer 3.为 ...

  8. HDU 1061 Rightmost Digit --- 快速幂取模

    HDU 1061 题目大意:给定数字n(1<=n<=1,000,000,000),求n^n%10的结果 解题思路:首先n可以很大,直接累积n^n再求模肯定是不可取的, 因为会超出数据范围, ...

  9. Redis3.0 Install

    Installation Download, extract and compile Redis with: $ wget http://download.redis.io/releases/redi ...

  10. [课程相关]homework-02

    一.如何组织代码 因为这个代码比较简单,用函数就足够了,个人觉得没必要用类,杀鸡不必用牛刀. 代码有点长,主要是加了很多判断参数的部分. 提取了一个公共的递归函数. 用了不少全局变量,可能当做参数传入 ...