简介:

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

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

gulp常用地址:

gulp官方网址:http://gulpjs.com

gulp插件地址:http://gulpjs.com/plugins

gulp 官方API:https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 中文API:http://www.ydcss.com/archives/424

1、gulp安装步骤

  安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

(1)安装nodejs

  官网:http://nodejs.org/  下载安装

(2)全局安装gulp

  cnpm install gulp-less --save-dev

(3)cnpm

  淘宝镜像:npm install cnpm -g --registry=https://registry.npm.taobao.org

  3.2、使用npm安装插件:命令提示符执行  npm install <name> [-g] [--save-dev]

    3.2.1、<name>:node插件名称。例:npm install gulp-less --save-dev

    3.2.2、-g:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量;  非全局安装:将会安装在当前定位目录;

         全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;

    3.2.3、--save:将保存配置信息至package.json(package.json是nodejs项目配置文件);

    3.2.4、-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;一般保存在dependencies的像这些express/ejs/body-parser等等。

    3.2.5、为什么要保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,

        其他开发者对应下载即可(命令提示符执行npm install,则会根据package.json下载所有需要的包,npm install --production只下载dependencies节点的包)

  3.3、使用npm卸载插件:npm uninstall <name> [-g] [--save-dev]  PS:不要直接删除本地插件包

    3.3.1、删除全部插件:npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻烦

    3.3.2、借助rimraf:npm install rimraf -g 用法:rimraf node_modules

  3.4、使用npm更新插件:npm update <name> [-g] [--save-dev]

    3.4.1、更新全部插件:npm update [--save-dev]

  3.5、查看npm帮助:npm help

  3.6、当前目录已安装插件:npm list

(4)项目安装gulp以及gulp插件

  本地安装gulp :cnpm install gulp --save-dev ;

  PS:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。

  gulp插件安装:cnpm install gulp-less --save-dev;

gulp自动化构建工具使用总结的更多相关文章

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

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

  2. gulp自动化构建工具

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

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

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

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

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

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

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

  6. gulp自动化构建工具使用

    gulpfile.js: var gulp = require("gulp"); var imagemin = require("gulp-imagemin") ...

  7. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

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

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

  9. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

随机推荐

  1. 嵌入式Linux之虚拟内存地址空间布局(Virtual Memory Space)

    虚拟内存地址空间 Linux内核属于微内核的范畴,内核控制计算机的硬件资源,运行在特权模式:用户态应用程序运行在普通用户模式,无法直接访问硬件资源,必须依托于内核提供的资源,如CPU资源.Memory ...

  2. Ehrenfeucht–Fraïssé game back-and-forth games

    w https://en.wikipedia.org/wiki/Ehrenfeucht–Fraïssé game

  3. CSAR——Channel-wise and Spatial Feature Modulation Network for Single Image Super-Resolution

    1. 摘要 CNN 中的特征包含着不同类型的信息,它们对图像重建的贡献也不一样.然而,现在的大多数 CNN 模型却缺少对不同信息的辨别能力,因此也就限制了模型的表示容量. 另一方面,随着网络的加深,来 ...

  4. 《Using Databases with Python》Week1 Object Oriented Python 课堂笔记

    Coursera课程<Using Databases with Python> 密歇根大学 Charles Severance Week1 Object Oriented Python U ...

  5. Python高效率遍历文件夹寻找重复文件

    前言 为什么要写这篇文章呢...主要还是业务中有个需求,遍历一个将近200w数据的文件夹,大部分还都是视频文件那种,但是这玩意用的次数还不多,做文件夹index也不是很ok,所以写了一个脚本来处理这个 ...

  6. DP---DAG、背包、LIS、LCS

    DP是真的难啊,感觉始终不入门路,还是太弱了┭┮﹏┭┮ DAG上的DP ​ 一般而言,题目中如果存在明显的严格偏序关系,并且求依靠此关系的最大/最小值,那么考虑是求DAG上的最短路或者是最长路.(据说 ...

  7. FormData模拟表单上传图片

    [node]---multer模块实现图片上传---FORMDATA   1.安装muterl第三方模块 cnpm install multer --save 2.使用 multer在解析完成后,会向 ...

  8. 解决浏览器打开网页后提示“dns_probe_possible”的方法

    使用浏览器浏览网页时偶尔会遇到无法上网且浏览器提示:DNS_PROBE_POSSIBLE 一般有三种情况会导致这样的故障: 1.网络协议出现故障,也就是常说的 DNS 设置问题 2.浏览器中设置问题, ...

  9. 移动端的设备提供了一个事件:orientationChange事件

    移动端的设备提供了一个事件:orientationChange事件:https://blog.csdn.net/gong1422425666/article/details/79001836

  10. [APIO2019] [LOJ 3146] 路灯 (cdq分治或树状数组套线段树)

    [APIO2019] [LOJ 3146] 路灯 (cdq分治或树状数组套线段树) 题面 略 分析 首先把一组询问(x,y)看成二维平面上的一个点,我们想办法用数据结构维护这个二维平面(注意根据题意这 ...