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的更多相关文章

  1. (转载)前端构建工具gulp使用

    前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...

  2. 前端构建工具gulp

    前端构建工具gulp使用   前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...

  3. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  4. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  5. 前端构建工具 Gulp.js 上手实例

    在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...

  6. 前端读者 | 前端构建工具Gulp

    @羯瑞 整理 前言 前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具.有的工具提供的功能还是非常强大的. FIS.百度团队的产品.现在百度的多个产品中使用.面向前 ...

  7. 前端构建工具gulp使用 (转)

    http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...

  8. 前端构建工具gulp介绍

    2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...

  9. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

随机推荐

  1. python 中__name__ = '__main__' 的作用

    有句话经典的概括了这段代码的意义: "Make a script both importable and executable" 意思就是说让你写的脚本模块既可以导入到别的模块中用 ...

  2. delphi怎么创建一个文本文件

    //创建一个文本文件 procedure TFrmAutomatismBalance.FlatButton3Click(Sender: TObject); var TF:TextFile;  Path ...

  3. [Maven]修改Maven的本地仓库路径

    安装Maven后我们会在用户目录下发现.m2 文件夹.默认情况下,该文件夹下放置了Maven本地仓库.m2/repository.所有的Maven构件(artifact)都被存储到该仓库中,以方便重用 ...

  4. 慕课编程题JS选项卡切换

    Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...

  5. Java计算上下基线

    public class GetAverageandStandardDevition { static List<Long> list = new ArrayList<Long> ...

  6. 【Linux编程】关于tcp_time_stamp

    今天看了一下cubic中使用到的tcp_time_stamp变量,往上查到的描述如下: 定义: include/net/tcp.h, line 707 #define tcp_time_stamp ( ...

  7. stickUp让页面元素“固定”位置

    stickUp能让页面目标元素“固定”在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置. http://www.bootcss.com/p/stickup/

  8. 物料主数据MRP4中的独立/集中

    转自悲守穷庐 http://blog.itpub.net/12287/viewspace-681569/ 从按订单还是按库存来考虑. (1)独立集中为空,即又上层决定独立集中情况 (2)独立集中为1: ...

  9. 定位form光标行

    In AX2009 if you call the research() method on a form passing true, the cursor position within a gri ...

  10. php 教程列表

    php教程 php概述 php环境搭建 PHP书写格式 php变量 php常量 PHP注释 php字符串 string PHP整型 integer PHP浮点型 float php布尔型 php数据类 ...