自动化前端构建工具--gulp
Gulp是一个基于任务的javascript工程命令行流式构建工具。为什么要用Gulp呢?前端开发进入到工程化阶段,我们需要压缩合并文件,加MD5戳;如果使用 CoffeeScript/ES6 去代替 Javascript,那么需要编译成jacascript;如果使用less或者sass,需要编译成css。所有的这些操作,在修改文件后,都要重新执行一遍,非常的繁琐。Gulp就是为我们完成这一套重复而机械的工作的。他可以在自动检测文件,每次发生修改,自动编译打包等。
下面介绍用法。
首先安装gulp。在桌面新建一个文件夹,进入文件夹中执行npm init。默认安装即可。这样帮我们快速构建一个工程。
C:\Users\Admin>cd Desktop C:\Users\Admin\Desktop>mkdir gulpTest C:\Users\Admin\Desktop>cd gulpTest C:\Users\Admin\Desktop\gulpTest>npm init
然后在工程目录下安装我们需要的插件:
C:\Users\Admin\Desktop\gulpTest>npm install gulp gulp-sass gulp-autoprefixer browser-sync --save-dev
browser-sync插件可以帮助我们自动刷新浏览器。
安装完成后,在gulpTest文件夹下新建一个文件夹app,存放我们的html等,然后在新建一个文件gulpfile.js。
接下来就是重点gulpfile怎么写了,首先先引入插件:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var autoperfixer = require('gulp-autoperfixer');
然后建一个browserSync的reload实例:
var reload = browserSync.reload;
接下来就可以编写任务了,举个例子,修改文件后自动编译less/sass:
//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放进来,该脚本就会执行这两个任务
下面直接贴几个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'));
});
八、给文件加上MD5戳
var rev = require('gulp-rev');
gulp.task('rev', function() {
return gulp.src([config.src + config.resource])
.pipe(rev()) //加上MD5戳
.pipe(gulp.dest(config.app))//输出文件
.pipe(rev.manifest())//生成rev-manifest.json,该文件用于替换HTML CSS文件中引用的MD5文件路径
.pipe(gulp.dest(config.rev))//rev-manifest.json文件放在rev目录下
});
九、给html css文件替换路径
var revCollector = require('gulp-rev-collector'); gulp.task('revCollector', function() {
return gulp.src(['rev/*.json', 'config/*.css','config/*.html']) //读取 rev-manifest.json 文件以及需要进行文件名替换的文件
.pipe(revCollector({
replaceReved: true
})) //执行文件内引用名的替换
.pipe(gulp.dest('config/app')); //替换后的文件输出的目录
});
十、修改文件后自动刷新浏览器
browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('watch',function(){
browserSync({
server:{
baseDir:'./src' //设置项目根目录,由此启动一个服务器
}
});
gulp.watch('src/*.html',reload);//监听html文件,文件变动马上自动刷新浏览器页面
});
当设定的文件发生变动时,会自动启动一个本地服务器localhost:3000,然后读取baseDir中的目录。
如果你的文件就在服务器里,代码需要修改成这样
// 代理
gulp.task('watch', function() {
browserSync.init({
proxy: "你的域名或IP"
});
gulp.watch('src/*.html',reload);//监听html文件,文件变动马上自动刷新浏览器页面
});
以及几个gulp命令:
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
编写完gulpfile之后就可以在cmd执行gulp来完成命令了。
ending~
自动化前端构建工具--gulp的更多相关文章
- (转载)前端构建工具gulp使用
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...
- 前端构建工具gulp
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...
- (转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- 前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
- 前端读者 | 前端构建工具Gulp
@羯瑞 整理 前言 前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具.有的工具提供的功能还是非常强大的. FIS.百度团队的产品.现在百度的多个产品中使用.面向前 ...
- 前端构建工具gulp使用 (转)
http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...
- 前端构建工具gulp介绍
2016年3月3日 10:46:08 晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
随机推荐
- python 中__name__ = '__main__' 的作用
有句话经典的概括了这段代码的意义: "Make a script both importable and executable" 意思就是说让你写的脚本模块既可以导入到别的模块中用 ...
- delphi怎么创建一个文本文件
//创建一个文本文件 procedure TFrmAutomatismBalance.FlatButton3Click(Sender: TObject); var TF:TextFile; Path ...
- [Maven]修改Maven的本地仓库路径
安装Maven后我们会在用户目录下发现.m2 文件夹.默认情况下,该文件夹下放置了Maven本地仓库.m2/repository.所有的Maven构件(artifact)都被存储到该仓库中,以方便重用 ...
- 慕课编程题JS选项卡切换
Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...
- Java计算上下基线
public class GetAverageandStandardDevition { static List<Long> list = new ArrayList<Long> ...
- 【Linux编程】关于tcp_time_stamp
今天看了一下cubic中使用到的tcp_time_stamp变量,往上查到的描述如下: 定义: include/net/tcp.h, line 707 #define tcp_time_stamp ( ...
- stickUp让页面元素“固定”位置
stickUp能让页面目标元素“固定”在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置. http://www.bootcss.com/p/stickup/
- 物料主数据MRP4中的独立/集中
转自悲守穷庐 http://blog.itpub.net/12287/viewspace-681569/ 从按订单还是按库存来考虑. (1)独立集中为空,即又上层决定独立集中情况 (2)独立集中为1: ...
- 定位form光标行
In AX2009 if you call the research() method on a form passing true, the cursor position within a gri ...
- php 教程列表
php教程 php概述 php环境搭建 PHP书写格式 php变量 php常量 PHP注释 php字符串 string PHP整型 integer PHP浮点型 float php布尔型 php数据类 ...