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 ...
随机推荐
- A=AUB
#include<stdio.h>#include<stdlib.h> #define LIST_MAX 10#define LIST_ADD 2 typedef struct ...
- linux系统下sendmail的搭建
学习鸟哥linux私房菜所得 sendmail 可以使用rpm -qa |grep sendmail来查看一下是否已安装sendmail-cf和sendmail 如果没有安装可用yum -y inst ...
- CSS3学习(圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等)
matrix CSS3 1. 圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二 ...
- win7使用iis并搭建 图片服务器
1.打开控制面板 2.程序-卸载程序 3.点击左边的 打开或关闭windows功能 4.如下图所示,找到internet信息服务勾选.顺便把FTP服务器也全部勾选了,后面会用到 5.进入 控制面板 – ...
- ssh模仿ansible批量执行命令的功能
#!/bin/bash ssh_hosts=("IP" "IP1".......) user=root remote_cmd="df -h" ...
- 基于canvas的陈列订货的分析
订货会软件中又新增了进行陈列订货,即一杆衣服订的显示出来,没订的不显示出来 主要遇到的问题是如何呈现,原先老是想着定位,left,top但是花出来的图容易出现原先的数据填写错误导致后期的图片的呈现出现 ...
- [NHibernate]Parent/Child
系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...
- 关于学习angularJS 的一些心得
从一开始接触到 angularJS 的时候,一头雾水啊. 下面根据学习资料,主要来 阐述一点,关于angularJS学习中需要注意的点 1.angularJS 是可以做到MVC 模式 2.angula ...
- 安卓3D游戏-神奇宝贝防御战
我和同学用unity引擎做的,作为软件工程的大作业. 是一个花费金钱抓怪.控制怪物站位.击杀进攻的敌人获得金钱的类似塔防的安卓游戏. 下载地址:http://pan.baidu.com/s/1gdpH ...
- 【转】搞不清FastCgi与php-fpm之间是个什么样的关系?
我在网上查fastcgi与php-fpm的关系,查了快一周了,基本看了个遍,真是众说纷纭,没一个权威性的定义. 网上有的说,fastcgi是一个协议,php-fpm实现了这个协议: 有的说,php-f ...