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 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
javascript实现点亮灯泡特效示例
Oct 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屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php中filter_input函数用法分析
2014/11/15 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
JavaScript数组迭代器实例分析
2015/06/09 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
Python tkinter和exe打包的方法
2020/02/05 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
阿德的梦教学反思
2014/02/06 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
七年级上册生物的课件
2019/08/07 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
Golang表示枚举类型的详细讲解
2021/09/04 Golang