从零开始用gulp
gulp是基于流的前端构件化工具。目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等。
这个鬼东西有什么用?请参考https://www.zhihu.com/question/35595198
为什么选择gulp,因为使用非常简单,学习成本低。以后想用别的工具再转去学也不难。
一个自动化构建工具都没用过的前端,何以谈人生?
以下是正题:
1.要玩gulp,首先得安装node,因为npm跟随node的包安装管理工具。具体下载直接百度nodejs中文网,根据自身的环境(windows linux mac)下载安装包(msi)。直接进行傻瓜式安装。
2.安装完node后开始全局安装gulp, 在命令行输入命令 npm install -g gulp ,安装成功后就可以在命令行输入gulp相关的命令了,例如gulp -v查看当前版本号。(npm安装不成功建议在命令前加sudo 或将 npm 换 cnpm 再试试)
3.在项目中安装 npm install --save-dev gulp,安装成功后就可以开始写配置文件了。
4.在项目根目录中创建文件 gulpfile.js
以下是简单的gulpfile.js demo代码
代码这种东西一开始不会写,就先抄,抄着抄着就懂怎么写了。
//引入插件
var gulp = require('gulp');
var less = require('gulp-less');//需要npm install --save-dev gulp-less var paths = ['./css/*.less']; //定义一个数组,指定文件路径
//下面开始编写一个任务
//less编译任务
gulp.task('less', function() { //创建一个gulp任务,任务名字是'less',然后一个回调函数
return gulp.src(paths) //gulp任务操作的源文件'paths'
.pipe(less()) //执行less编译
.pipe(gulp.dest('./css')); //gulp任务输出的新文件
});
//watch监听任务
gulp.task('watch', function(){ //创建第二个gulp任务,任务名字是‘watch',然后一个回调函数
gulp.watch(paths,['less']); //gulp的watch监听,文件改动后立即重新执行less任务 可参考http://www.gulpjs.com.cn/docs/api/
});
//gulp.watch('default',['less']);
gulp.task('default', ['less','watch']); //gulp的default任务,相当于glup的执行入口。然后把less任务和watch放进来,该脚本就会执行这两个任务
把以上代码写入gulpfile.js 后保存,然后项目根路径下执行命令
gulp
就开始执行gulp完成你安排的任务。
日常开发中需要gulp做的有很多如合并文件(gulp-concat)压缩(gulp-uglify)重命名(gulp-rename)等等。
这就需要自己编写task来让gulp来执行。
最后总结一下,写好一个gulpfile.js很简单,结合demo代码和下面五个命令
gulp.task(name, fn)//新建一个gulp任务,name是任务名,fn回调函数 gulp.run(tasks...)//尽可能多的并行运行多个task 新版本中的gulp中使用run会发出警告,这样的情况下我们可以用start代替 gulp.watch(glob, fn//)当glob内容发生改变时,执行fn gulp.src(glob)//返回一个可读的stream gulp.dest(glob)//返回一个可写的stream
需要更多的说明或者操作可以去下面的网站逛一逛
gulp官方网址:http://gulpjs.com
gulp插件地址:http://gulpjs.com/plugins
最后简单写就几个常用的gulp task,方便日后调用
一、压缩css
var minifycss = require('gulp-minify-css');//引用插件,需npm install --save-dev gulp-minify-css
gulp.task('minifycss', function() {
return gulp.src('src/css/*.css') //压缩的文件
.pipe(minifycss()) //执行压缩
.pipe(gulp.dest('dst/css')); //输出文件夹
});
二、压缩js
var concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'); //引用插件,需npm install --save-dev xxxxxx gulp.task('minifyjs', function() { return gulp.src('src/*.js') //操作的源文件 .pipe(concat('main.js')) //合并所有js到main.js .pipe(gulp.dest('minified/js')) //输出main.js到文件夹 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 .pipe(uglify()) //压缩 .pipe(gulp.dest('minified/js')); //输出 });
三、清空输出目录
var del =require('del');
gulp.task('clean', function() {
return del(['dst']); //'dst'是一个目录
});
四、压缩图片
const imagemin = require('gulp-imagemin'); gulp.task('default', function(){
return gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'));
});
五、压缩html
var gulp = require('gulp'),
htmlmin = require('gulp-htmlmin'); gulp.task('htmlMin', function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src('src/*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('dst'));
});
六、合并文件
var concat = require('gulp-concat'); gulp.task('concat', function () {
gulp.src('src/js/*.js')
.pipe(concat('all.js'))//合并后的文件名
.pipe(gulp.dest('dist/js'));
});
七、css自动处理浏览器前缀,如添加-webkit-解决浏览器兼容问题
var autoprefixer = require('gulp-autoprefixer'); gulp.task('autoprefixer', function () {
gulp.src('css/index.css')
.pipe(autoprefixer())
.pipe(gulp.dest('dist/css'));
});
从零开始用gulp的更多相关文章
- gulp前端自动化入门
一.从零开始搭建gulp前端自动化 1.首先安装nodejs 2.npm init 初始化 生成package.json 2.1 可以选装cnpm cnpm是淘宝提供的服务 安装:命令提示符执行npm ...
- 从零开始搭建Vue组件库——VV-UI
前言: 前端组件化是当今热议的话题之一,也是我们在开发单页应用经常会碰到的一个问题,现在我们有了功能非常完善的Element-UI.各个大厂也相继宣布开源XXX-UI.但是也会存在一些问题,比如每个公 ...
- 从零开始搭建Vue组件库 VV-UI
前言: 前端组件化是当今热议的话题之一,也是我们在开发单页应用经常会碰到的一个问题,现在我们有了功能非常完善的Element-UI.各个大厂也相继宣布开源XXX-UI.但是也会存在一些问题,比如每个公 ...
- 一个「学渣」从零开始的Web前端自学之路
从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低 ...
- 从零开始搭建口袋妖怪管理系统(4)-借助webpack4.6工程化项目(上)
"手动是不可能手动的了,这辈子都不可能手动的了." 一.目标 上一章我们借助ngRoute,完成了口袋妖怪SPA系统的多模块导航开发,但是现在引用的东西越来越多,项目文件目录开始变 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
随机推荐
- [转]SQL Server表锁定原理以及如何解除锁定
2010年10月13日 12:46 来源:部松昌的博客 作者:部松昌 编辑:胡铭娅 一: 下面以AdventureWorks2008为示例数据库做简要的说明,过滤掉一般的数据库的共享锁, 作为示例必须 ...
- 怎么计算Oracle的表一条记录占用空间的大小
如何计算Oracle的表一条记录占用空间的大小? 如何计算Oracle的表记录占用空间的大小? 是把所有字段的大小都加起来吗?varchar(256),char,number算几个字节? ------ ...
- 深入理解HTTP协议
- 解析 Json 相关
statusJson sj = new statusJson() { ShipmentNum = "555555", Status1 = "05", Wareh ...
- Oracle数据库备份 expdp/impdp导出导入命令
使用EXPDP和IMPDP时应该注意的事项: EXP和IMP是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用. EXPDP和IMPDP是服务端的工具程序,他们只能在ORACLE服务端使用, ...
- CSS3使用AnimationEnd为同一个元素添加多个动画效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- wince中测试驱动应用程序的实现
这里建的工程是MFC的smart device,选择ARMV4I的指令集,不同的设备可能会有轻微的不同,不过大体实现是一样滴.还有,这里选的应用类型是dialog base. 1.应用监测内核动向 内 ...
- 游戏Loading中的小提示和Loading动画实现
学习unity1年多了,工作也1年了,因为工作需要,有几个月没接触unity Ngui啦. 学的还是不踏实.继续努力吧.由于下周就要进行新游戏的开发,这几天熟悉熟悉NGUI,今天按照现在公司以前的项目 ...
- java.lang.OutOfMemoryError: Java heap space解决方法
引起java.lang.OutOfMemoryError: Java heap space异常,可能是由JAVA的堆栈设置太小的原因 根据网上的答案大致有以下两种解决方法: 1.在D:/apache- ...
- JS设计模式初探
目的:设计模式众多,尝试用博客记录下学到的不同设计模式的优劣,方便以后查阅. 前言:半年前看高程的时候看到设计模式这章,云里雾里,不是看不明白,而是不明白为啥要如此麻烦只为创建一个对象.直到最近完成了 ...