gulp教程_从入门到项目中快速上手使用方法


Posted in Javascript onSeptember 14, 2017

gulp是什么?

gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”

一、安装gulp与压缩js文件

命令:

npm install gulp -g

npm install gulp --save-dev

初始化项目package.json的配置:npm init --yes

创建项目的目录结构

demo2
 -----dist
 -----src
     -css
     -img
     -js
 -----gulpfile.js
 -----package.json

在js目录下新建文件( lib.js )

var Oper = {
   add : function( n1, n2 ){
     return n1 + n2;
   },
   sbb : function( n1, n2 ){
     return n1 - n2;
   }
 }

安装压缩js的插件: npm install gulp-uglify --save-dev,

然后在gulpfile.js中,输入任务处理代码

var gulp = require( 'gulp' );
 var uglify = require( 'gulp-uglify' );
 
 gulp.task('min-js', function() {
   gulp.src('src/js/*.js')
     .pipe( uglify() )
     .pipe( gulp.dest('dist/js') );
 });

gulp.task(name, fn) - 定义任务,第一个参数是任务名,第二个参数是任务内容。

gulp.src(path) - 选择文件,传入参数是文件路径。

gulp.dest(path) - 输出文件

gulp.pipe() - 管道,你可以暂时将 pipe 理解为将操作加入执行队列

在命令行执行任务: gulp min-js

就会在 dist/js/lib.js 生成压缩文件

var Oper={add:function(n,r){return n+r},sbb:function(n,r){return n-r}};

在demo2目录下创建index.html,输入以下测试代码

<script src="./dist/js/lib.js"></script>
   <script>
     alert( Oper.add( 100, 200 ) );
   </script>

发现压缩好的lib.js文件是可以正常使用的

二、压缩css文件

安装插件: npm install gulp-clean-css --save-dev

demo2/src/css下新建文件style.css

html,body {
  margin:0;
  padding:0;
}
li {
  list-style-type:none;
}
a{
  text-decoration: none;
  color:#666;
}

在gulpfile.js文件中添加压缩css的任务

var gulp = require( 'gulp' );
var uglify = require( 'gulp-uglify' );
var cleanCSS = require( 'gulp-clean-css' );

gulp.task('min-js', function() {
  gulp.src('src/js/*.js')
    .pipe( uglify() )
    .pipe( gulp.dest('dist/js') );
});

gulp.task('min-css', function() {
  gulp.src('src/css/*.css')
    .pipe( cleanCSS() )
    .pipe( gulp.dest('dist/css') );
});

然后在命令行执行gulp min-css任务 就会在dist/css生成style.css压缩文件

body,html{margin:0;padding:0}li{list-style-type:none}a{text-decoration:none;color:#666}

三、编译less文件

安装插件:npm install gulp-less --save-dev

在src/css下面新建style.less文件

@c1 : green;
@c2 : red;
div {
  width:200px;
  height:200px;
  background:@c1;
  div {
    background:@c2;
    transition:all ease 1s;
  }
}

gulpfile.js中添加任务:

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

gulp.task('min-js', function() {
  gulp.src('src/js/*.js')
    .pipe( uglify() )
    .pipe( gulp.dest('dist/js') );
});

gulp.task('min-css', function() {
  gulp.src('src/css/*.css')
    .pipe( cleanCSS() )
    .pipe( gulp.dest('dist/css') );
});

gulp.task( 'compile-less', function(){
  gulp.src( 'src/css/*.less' )
    .pipe( less() )
    .pipe( gulp.dest( 'dist/less' ) );
} );

执行任务: gulp compile-less,在dist/less中生成style.css文件

div {
  width: 200px;
  height: 200px;
  background: green;
 }
 div div {
  background: red;
  transition: all ease 1s;
 }

四、合并js文件

安装插件:npm install gulp-concat --save-dev

demo2/src/js新建lib2.js文件:

function $( id ){
   return document.getElementById( id );
 }

在gulpfile.js中新增任务:

var gulp = require( 'gulp' );
var uglify = require( 'gulp-uglify' );
var cleanCSS = require( 'gulp-clean-css' );
var less = require('gulp-less');
var concat = require('gulp-concat');

gulp.task('min-js', function() {
  gulp.src('src/js/*.js')
    .pipe( uglify() )
    .pipe( gulp.dest('dist/js') );
});

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

gulp.task('min-css', function() {
  gulp.src('src/css/*.css')
    .pipe( cleanCSS() )
    .pipe( gulp.dest('dist/css') );
});

gulp.task( 'compile-less', function(){
  gulp.src( 'src/css/*.less' )
    .pipe( less() )
    .pipe( gulp.dest( 'dist/less' ) );
} );

执行任务:gulp concat-file

在dist/js下面生成all.min.js文件

function $(n){return document.getElementById(n)}var Oper={add:function(n,t){return n+t},sbb:function(n,t){return n-t}};

五、自动监测文件变化,执行任务

gulp.task( 'auto', function(){
   gulp.watch( 'src/js/*.js', ['min-js'] );
   gulp.watch( 'src/css/*.css', ['min-css'] );
 } );
 gulp.task( 'default', ['auto'] );

这里添加了一个默认任务default: 执行auto任务,auto里面自动监测压缩js和压缩css任务

在命令行直接执行gulp.

要执行其他任务,只需要按照这几步就可以了:

1,安装相应的插件

2,添加相应的任务

3,执行任务

以上这篇gulp教程_从入门到项目中快速上手使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS Array对象入门分析
Oct 30 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
关于uniApp editor微信滑动问题
Jan 15 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 #Javascript
基于js中document.cookie全面解析
Sep 14 #Javascript
基于Vue过渡状态实例讲解
Sep 14 #Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 #Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 #Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 #Javascript
对于js垃圾回收机制的理解
Sep 14 #Javascript
You might like
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
php定时执行任务设置详解
2015/02/06 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
javascript基础知识讲解
2017/01/11 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python可变参数用法实例分析
2017/04/02 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
师范应届生求职信
2013/11/15 职场文书
高一化学教学反思
2014/02/05 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis