资讯专栏INFORMATION COLUMN

Glup快速入门整理

HmyBmny / 2990人阅读

摘要:下载打包插件引入引入的插件是个方法,必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出,其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新

Gulp介绍

中文主页: http://www.gulpjs.com.cn/

gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器

能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的
合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务

gulp更高效(异步多任务), 更易于使用, 插件高质量

安装 nodejs, 查看版本: node -v

创建一个简单的应用gulp_test

|- dist
|- src
  |- js
  |- css
  |- less
|- index.html
|- gulpfile.js-----gulp配置文件
|- package.json
  {
    "name": "gulp_test",
    "version": "1.0.0"
  } 

安装gulp:

全局安装gulp

npm install gulp -g

局部安装gulp

npm install gulp --save-dev

配置编码: gulpfile.js

//引入gulp模块
var gulp = require("gulp");
//定义默认任务
gulp.task("任务名", function() {
  // 将你的任务的任务代码放在这
});
gulp.task("default", ["任务"])//异步执行

构建命令:

gulp

使用gulp插件

相关插件:

gulp-concat : 合并文件(js/css)

gulp-uglify : 压缩js文件

gulp-rename : 文件重命名

gulp-less : 编译less

gulp-clean-css : 压缩css

gulp-livereload : 实时自动编译刷新

重要API

gulp.src(filePath/pathArr) :

指向指定路径的所有文件, 返回文件流对象

用于读取文件

gulp.dest(dirPath/pathArr)

指向指定的所有文件夹

用于向文件夹中输出文件

gulp.task(name, [deps], fn)

定义一个任务

gulp.watch()

监视文件的变化

处理js

创建js文件

src/js/test1.js

(function () {
function add(num1, num2) {
var num3 = 0;
num1 = num2 + num3;
return num1 + num2;
}
console.log(add(10, 30));
})();

src/js/test2.js

(function () {
var arr = [2,3,4].map(function (item, index) {
  return item+1;
});
console.log(arr);
})();

下载插件:

npm install gulp-concat gulp-uglify gulp-rename --save-dev

配置编码

var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");

gulp.task("minifyjs", function() {
    return gulp.src("src/js/*.js") //操作的源文件
        .pipe(concat("built.js")) //合并到临时文件     
        .pipe(gulp.dest("dist/js")) //生成到目标文件夹
        .pipe(rename({suffix: ".min"})) //重命名  
        .pipe(uglify())    //压缩
        .pipe(gulp.dest("dist/js"));
});

gulp.task("default", ["minifyjs"]);

页面引入js浏览测试 : index.html

打包测试: gulp

处理css

创建less/css文件

src/css/test1.css

#div1 {
  width: 100px;
  height: 100px;
  background: green;
}

src/css/test2.css

#div2 {
  width: 200px;
  height: 200px;
  background: blue;
}

src/less/test3.less

@base: yellow;
.index1 { color: @base; }
.index2 { color: green; }

下载插件:

npm install gulp-less gulp-clean-css --save-dev 

配置编码

var less = require("gulp-less");
var cleanCSS = require("gulp-clean-css");

//less处理任务
gulp.task("lessTask", function () {
  return gulp.src("src/less/*.less")
      .pipe(less()) 
      
      .pipe(gulp.dest("src/css"));
})
//css处理任务, 指定依赖的任务
gulp.task("cssTask",["lessTask"], function () {

  return gulp.src("src/css/*.css")
      .pipe(concat("built.css"))
      .pipe(gulp.dest("dist/css"))
      .pipe(rename({suffix: ".min"}))
      .pipe(cleanCSS({compatibility: "ie8"}))
      .pipe(gulp.dest("dist/css"));
});

gulp.task("default", ["minifyjs", "cssTask"]);

页面引入css浏览测试 : index.html


div1111111
div2222222

打包测试: gulp

处理html

下载插件:

npm install gulp-htmlmin --save-dev

配置编码

var htmlmin = require("gulp-htmlmin");
//压缩html任务
gulp.task("htmlMinify", function() {
    return gulp.src("index.html")
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest("dist"));
});
gulp.task("default", ["minifyjs", "cssTask", "htmlMinify"]);

修改页面引入


打包测试: gulp

自动编译

下载插件

npm install gulp-livereload --save-dev

配置编码:

var livereload = require("gulp-livereload");
          
//所有的pipe
.pipe(livereload());

gulp.task("watch", ["default"], function () {    
  //开启监视
  livereload.listen();
  //监视指定的文件, 并指定对应的处理任务
  gulp.watch("src/js/*.js", ["minifyjs"])
  gulp.watch(["src/css/*.css","src/less/*.less"], ["cssTask","lessTask"]);
});

热加载(实时加载)

下载插件:gulp-connect

1、 npm install gulp-connect --save-dev
2、 注册 热加载的任务 server,注意依赖build任务 
3、注册热加载的任务
    //配置加载的选项
    connect.server({
root : "dist/",//监视的源目标文件路径
livereload : true,//是否实时刷新
port : 5000//开启端口号
     });
     // 自动开启链接
     open("http://localhost:5000");//npm install open --save-dev
     // 监视目标文件
    gulp.watch("src/js/*.js", ["js"]);
    gulp.watch(["src/css/*.css", "src/css/*.less"], ["cssMin", "less"]);

扩展

打包加载gulp插件

前提:将插件下载好。

下载打包插件: gulp-load-plugins

npm install gulp-load-plugins --save-dev

引入: var $ = require("gulp-load-plugins")();!!!引入的插件是个方法,必须记住调用。

神来之笔:其他的插件不用再引入了

使用方法:

* 所有的插件用 $ 引出,其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分):如:concat,connect,cssmin...
gulp.task("less", function () {
      return gulp.src("src/less/*.less")
    .pipe($.less())//将less转换为less
    .pipe(gulp.dest("src/css/"))//将转换为less的文件输出到src下
    .pipe($.livereload())//实时刷新
    .pipe($.connect.reload())
});

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84185.html

相关文章

  • Glup快速入门整理

    摘要:下载打包插件引入引入的插件是个方法,必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出,其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍 中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器 能自动化...

    jhhfft 评论0 收藏0
  • Glup快速入门整理

    摘要:下载打包插件引入引入的插件是个方法,必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出,其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍 中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器 能自动化...

    ysl_unh 评论0 收藏0
  • 怎么开发并发布一个可用的 JavaScript 模块 ?

    摘要:但是,我们发布之前,需要做一些持续集成和单元测试,用来保证代码的正确性,稳定性。 Javascript 那么流行,作为一个前端开发者,或者前端入门者,发布一个正式可用的 Javascript 模块,对于自己来说应该成长很大。下面就以一个简单的 Javascript 模块 filesize.js 来介绍 github、travis-ci、npm 这些内容的组合使用。 一、目标概览 本文将...

    TANKING 评论0 收藏0
  • MEAN.js 文档

    摘要:感谢使用框架本文档涵盖构建应用所需的基础知识。用于数据校验的组件及相关文件在此目录进行管理。除了自定义中间件外,还是用了诸多第三方的中间件,它们是五测试我们使用组件对服务端代码进行测试。识别当前导航从已有导航中删除给定标识的导航配置。 本文同步至个人博客 MEAN.js 文档,转载请注明出处。 Overview 感谢使用 MEAN.js 框架! 本文档涵盖构建 MEAN 应用所需的基础...

    Hydrogen 评论0 收藏0
  • 在 Laravel 项目中使用 Glup 之 Laravel-Elixir

    摘要:结果会被存放到拷贝文件目录你可以使用方法拷贝文件目录到新路径,所有操作都相对于项目根目录版本号缓存刷新很多开发者会给编译的前端资源添加时间戳或者唯一令牌后缀以强制浏览器加载最新版本而不是代码的缓存副本。 环境准备 1、安装 nodejs 和 npm  如果你使用的是 Laravel 的 Homestead 环境,可以不用安装了,已自带。  我们来查看下它们的版本: $ node -v ...

    ralap 评论0 收藏0

发表评论

0条评论

HmyBmny

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<