gulp自动化构建
最近正在使用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自动化构建的更多相关文章
- gulp自动化构建工具的使用
gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...
- gulp 自动化构建html项目--自动刷新
使用gulp自动化构建项目是前端学习的重要部分,gulp依赖于node.js.首选电脑要配置node和npm. 查看node版本号 node --version 查看npm 版本 npm --vers ...
- gulp自动化构建工具
gulp 自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/ 中文网 http://gulpjs.com/plugins/ 英文网 ...
- Gulp(自动化构建工具 )
前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1. 压缩js 2. 压缩css 3. 压缩less 4. 压缩图片 等等… 我们完全可以利用Gulp ...
- gulp自动化构建教程
gulp及gulpfile.js编写示例 本文主要记录一个gulpfile.js示例,以免以后用的时候遗忘.但首先还是要了解gulp是什么以及如何使用. 一.什么是gulp 简单来说:就是压缩前 ...
- Gulp自动化构建的基本使用
Study Notes 本博主会持续更新各种前端的技术,如果各位道友喜欢,可以关注.收藏.点赞下本博主的文章. Gulp 用自动化构建工具增强你的工作流程! gulp 将开发流程中让人痛苦或耗时的任务 ...
- gulp自动化构建工具安装使用(1)
我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...
- gulp自动化构建工具使用总结
简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- Gulp自动化构建工具的简单使用
相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugin ...
随机推荐
- .net中c#获取本机IP地址实例代码
* 在使用前,一定要注意在头部加上引用: using System.Net; 代码如下: using System; using System.Collections.Generic; using S ...
- Anynote 基于ExtJS多用户个人信息管理系统
Anynote——个人信息管理系统 —–主要用于学习交流—– 源码下载:https://git.oschina.net/xiyt/Anynote.git 一.系统说明 Anynote是一个基于extj ...
- [Scala] akka actor编程(一)
Akka基础 Akka笔记之Actor简介 Akka中的Actor遵循Actor模型.你可以把Actor当作是人.这些人不会亲自去和别人交谈.他们只通过邮件来交流. 1. 消息传递 2. 并发 3 ...
- 微信公众平台"微信连Wi-Fi"功能来了 线下微信增粉利器
微信连Wi-Fi功能在第三方开发者和服务商已经有出现了,但有些成本相对会高些.近日微信公众平台新添了一个功能插件“微信连Wi-Fi”,已有微信认证过的公众号即可申请开通.赶紧去布局这个线下微信增粉利器 ...
- 关于当传过来的值转换成string类型报错的问题
有时候直接写 string str=request.param["str"].tostring;会报错,是因为接受到的值可能是空的 这个时候就可以这样写 string _actio ...
- PHP 图片处理工具类(添加水印与生成缩略图)
=================ImageTool.class.php================= <?php class ImageTool { private $imagePath; ...
- MongoDB_C_Driver使用教程(2)高级连接
高级连接(Advanced Connection) 以下指南包含MongoDB配置的特定类型的信息. 简单的连接到独立服务器的示例,请参考MongoDB_C_Dirver使用教程. 要连接到启用身份验 ...
- 将 VMware 最小化到系统托盘
1, 下载 Trayconizer官网地址: http://www.whitsoftdev.com/trayconizer/下载地址: http://www.whitsoftdev.com/files ...
- celery 异步任务小记
这里有一篇写的不错的:http://www.jianshu.com/p/1840035cb510 自己的"格式化"后的内容备忘下: 我们总在说c10k的问题, 也做了不少优化, 然 ...
- dex文件格式二
一. dex文件头 (1) magic value 在DexFile.c dexFileParse函数中 会先检查magic opt 啥是magic opt呢? 我们刚刚从cache目录拷贝出来的 ...