最近正在使用gulp去帮我自动化构建一些技术块,感觉很爽,所以把gulp操作步骤给写笔记,记录下来。。。

首先了解什么是gulp?

我的理解是一个工具并且自动化的,能帮你把一些前端技术的语法转换成当前浏览器能读取的技术。比如less.css,sass.css或者es6等等,只要配置好就可以运行了。

gulp安装

为了方便使用,直接全局安装

npm install gulp -g

然后到指定项目工程中进行安装配置

npm install gulp --save-dev  这样就是将gulp配置设置到指定的项目工程目录下,有一个package.json配置文件,

将gulp配置在一个devDependencies属性中,如果你还想配置更多只要写出这样就可以一口气下载模块了

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

用图展示更直观的看到效果

npm下载所需要的东西根据自己需求完成,接下来我们需要建立一个gulpfile.js,用来引用所下载到的gulp模块,

在node.js环境下,我们直接require就可以引用了。如图:

里面的一些配置属性

gulp.src:用来指定引用一个或多个文件

gulp自动化构建的更多相关文章

  1. gulp自动化构建工具的使用

    gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...

  2. gulp 自动化构建html项目--自动刷新

    使用gulp自动化构建项目是前端学习的重要部分,gulp依赖于node.js.首选电脑要配置node和npm. 查看node版本号 node --version 查看npm 版本 npm --vers ...

  3. gulp自动化构建工具

    gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ...

  4. Gulp(自动化构建工具 )

    前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp ...

  5. gulp自动化构建教程

    gulp及gulpfile.js编写示例    本文主要记录一个gulpfile.js示例,以免以后用的时候遗忘.但首先还是要了解gulp是什么以及如何使用. 一.什么是gulp 简单来说:就是压缩前 ...

  6. Gulp自动化构建的基本使用

    Study Notes 本博主会持续更新各种前端的技术,如果各位道友喜欢,可以关注.收藏.点赞下本博主的文章. Gulp 用自动化构建工具增强你的工作流程! gulp 将开发流程中让人痛苦或耗时的任务 ...

  7. gulp自动化构建工具安装使用(1)

    我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...

  8. gulp自动化构建工具使用总结

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

  9. Gulp自动化构建工具的简单使用

    相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugin ...

随机推荐

  1. Character类

    Character类 用来判断大小写 方法: public static boolean isUpperCase(char ch):判断是否大写 public static boolean isLow ...

  2. ecshop 后台 审核功能

    有三个关键文件 html文件<img src="images/{if $vo.is_check}yes{else}no{/if}.gif" onclick="lis ...

  3. Shell文件权限和脚本执行

    一.预备知识 1.shell的作用   2.常识 (1)Tab键自动补全   使用Terminal时,输入命令的前几个字母,敲tab会自动补全命令或文件名.目录等. 好处:操作速度更快:不容易出错: ...

  4. jsp一句话

    <%@page import="java.io.*,java.util.*,java.net.*,java.sql.*,java.text.*"%><%!Stri ...

  5. [NHibernate]一对多关系(级联删除,级联添加)

    目录 写在前面 文档与系列文章 一对多关系 一个例子 级联删除 级联保存 总结 写在前面 在前面的文章中,我们只使用了一个Customer类进行举例,而在客户.订单.产品中它们的关系,咱们并没有涉及, ...

  6. Android-修改TabWidget字体大小颜色及对齐

    在Android中,我们可以定义TabWidget来分页.在上一篇文章中有说到使用TabWidget定义Tab分页布局,但大部分用户可能会觉得默认的字体有点小,但Tab选项卡默认又不能设定字体大小,如 ...

  7. tyvj1148 小船弯弯

    描述 童年的我们,充满了新奇的想法.这天,小朋友们用彩虹画笔在云霞上绘制了世界上最美丽的图画.那描绘的是一条大河波浪宽,风吹稻花香两岸的情景.欣赏着自己的作品,小朋友们别提多开心了.这时,Q小朋友对C ...

  8. linux下实现在程序运行时的函数替换(热补丁)

    声明:以下的代码成果,是参考了网上的injso技术,在本文的最后会给出地址,同时非常感谢injso技术原作者的分享. 但是injso文章中的代码存在一些问题,所以后面出现的代码是经过作者修改和检测的. ...

  9. Gyro

    Gyro 2 Plugin gyro2.jsVersion 1.19HTML5 only 本插件使用手机或平板设备上的陀螺仪和加速度传感器来控制krpano中的浏览和观看方向.Gyro2插件对比旧的陀 ...

  10. SAM/BAM文件处理

    当测序得到的fastq文件map到基因组之后,我们通常会得到一个sam或者bam为扩展名的文件.SAM的全称是sequence alignment/map format.而BAM就是SAM的二进制文件 ...