文档章节

前端自动化构建工具gulp的使用介绍

jywud
 jywud
发布于 2016/05/14 14:26
字数 648
阅读 155
收藏 7

gulp是基于流的自动化构建工具

简介:

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

 

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

利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

1.首先安装nodejs环境

下载地址 https://nodejs.org ,下载后默认一直点击下一步就行,安装node后自动安装了npm包管理工具。

2.全局安装gulp

 npm install -g gulp 会从github下载安装。安装完成后  gulp -v可以查看版本号

3.作为项目的开发依赖安装gulp

cd 到你的项目根目录

npm install gulp --save-dev

完成后在项目根目录会增加node_module文件夹,这就是node管理包的文件夹,安装的东西都在里面

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

-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;)

4.在你的项目根目录新建gulpfile.js

var  gulp = require('gulp');

gulp.task('default',function(){
    console.log('task....');    
});

5.在你的项目路径下,运行 gulp 命令就会在控制台打印  task...信息

(gulp后面可以加 task的名字,不加的话,默认运行 ‘default’)

至此你就会使用gulp了

6.安装常用gulp插件

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

需要用到时就使用require引入即可,类似var  rename = require('gulp-rename');

'use strict';
var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
var clean = require('gulp-clean');
gulp.task('default',['rename'], function(){
	gulp.src('js/index.js')
	//.pipe(gulp.dest('dist/'))
	.pipe(uglify())
	.pipe(rename('index.min.js'))
	.pipe(gulp.dest('dist/'));
});

gulp.task('concat', function(){
	gulp.src('js/*.js')
	.pipe(concat('all.js'))
	.pipe(gulp.dest('dist/'));
});

gulp.task('rename',function(){
	gulp.src('js/**/*.js')
	//.pipe(rename({suffix:'.txt'})) 
	.pipe(rename(function(path){
		path.extname = ".txt"  //修改后缀名
	}))
	.pipe(gulp.dest('dist/'))
	.pipe(notify({message:'task ok'}));;
});

gulp.task("clean", function(){  //删除文件
    return gulp.src('dist')
        .pipe(clean());
})

 

© 著作权归作者所有

下一篇: npm换源
jywud
粉丝 2
博文 10
码字总数 11214
作品 0
南京
前端工程师
私信 提问
前端自动化构建工具库之gulp

这是一款基于nodejs的前端自动化构建工具--gulp,以下是使用gulp的步骤: 1.安装主程序,在需要编译的目录输入 2.安装常用插件 3.配置gulpfile.js,如果工作目录下没有该文件,请新建gulpfil...

w-rain
2016/05/20
65
0
ES6项目构建-1

基础架构 任务自动化gulp 1.什么是任务自动化 减少人工操作,让机器自动监听操作,自动响应。 2.什么是gulp 一个工具。解决自动构建的工具,增强工作流。 3.gulp的作用 完成工作流。利用它的...

yy不会笑
2017/12/18
0
0
关于 npm script 我写了本掘金小册,还配了视频(内附限量优惠码)

不夸张的说,这可能是目前社区中最完整的把 npm script 和前端工作流相结合并运用到实际项目中的文字 + 视频版教程了,内容源于我对最佳实践的积累和实战,也是我精心编写和录制 1 个月的成果...

王仕军
2018/10/29
0
0
【转】有关 Grunt - 自动化构建工具的奇技淫巧

原文:https://segmentfault.com/a/1190000005029360?utmsource=tuicool&utmmedium=referral 之所以想写有关前端自动化工具的文章出于以下几个原因: 自动化构建工具对于前端开发的重要性:高...

iNiL0119
2016/11/04
16
0
前端工程化——构建工具选型

注:文章源于2017年8月的一次内部分享,部分数据可能已经过时。 一、什么是前端工程化 前端工程化是依据业务特点,将前端开发的规范、流程、技术、工具、经验等形成规范并建立成一种标准的体...

Bellhe
2018/01/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

用Python帮你上马,哪里无码打哪里

目录 0 引言 1 环境 2 需求分析 3 代码实现 4 代码全景展示 5 后记 0 引言 所谓的像素图,就是对图像做一个颗粒化的效果,使其产生一种妙不可言的朦胧感。费话不多说,先来看一张效果图。 <c...

上海小胖
14分钟前
1
0
python from import与import as 的含义

from os import makedirs, unlink, sep #从os包中引入 makedirs.unlink,sep类 from os.path import dirname, exists, isdir, splitext 从 os包中的path类中引入 dirmame exists 等方法 impo......

dillonxiao
14分钟前
1
0
【转】URL最大长度问题

今天在测试Email Ticket的时候发现在进行Mark as Read/Unread操作时,请求是通过GET方式进行的。URL中列出了所有参与该操作的Ticket Id。于是,我想起GET请求是有最大长度限制的。遂输入超长...

ZhangLG
17分钟前
0
0
Segment段

CurrentHashMap和HashMap相比支持并发操作,整个CurrentHashMap是由一个个的Segment组成的,也是就是常说的分段锁 Segment继承了重入锁ReentrantLock来进行加锁, 可以简单的把CurrentHashMa...

周慕云
18分钟前
0
0
JS Date 自定义格式化方法

JS Date 自定义格式化方法 Date 时间对象 快速 自定义格式化 定义方法 // 自定义格式化方法Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth()+1, ......

DrChenXX
23分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部