[js高手之路]gulp教程-从入门到项目中快速上手使用
来源:互联网 发布:业务员管理客户软件 编辑:程序博客网 时间:2024/06/04 18:57
在这之前,我已经分享过一个webpack的全系列,相对于webpack, gulp使用和配置起来非常的简单.
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
创建项目的目录结构
1 demo22 -----dist3 -----src4 -css5 -img6 -js7 -----gulpfile.js8 -----package.json
在js目录下新建文件( lib.js )
1 var Oper = {2 add : function( n1, n2 ){3 return n1 + n2;4 },5 sbb : function( n1, n2 ){6 return n1 - n2;7 }8 }
安装压缩js的插件: npm install gulp-uglify --save-dev,
然后在gulpfile.js中,输入任务处理代码
1 var gulp = require( 'gulp' );2 var uglify = require( 'gulp-uglify' );3 4 gulp.task('min-js', function() {5 gulp.src('src/js/*.js')6 .pipe( uglify() )7 .pipe( gulp.dest('dist/js') );8 });
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,输入以下测试代码
1 <script src="./dist/js/lib.js"></script>2 <script>3 alert( Oper.add( 100, 200 ) );4 </script>
发现压缩好的lib.js文件是可以正常使用的
二、压缩css文件
安装插件: npm install gulp-clean-css --save-dev
demo2/src/css下新建文件style.css
1 html,body { 2 margin:0; 3 padding:0; 4 } 5 li { 6 list-style-type:none; 7 } 8 a{ 9 text-decoration: none;10 color:#666;11 }
在gulpfile.js文件中添加压缩css的任务
1 var gulp = require( 'gulp' ); 2 var uglify = require( 'gulp-uglify' ); 3 var cleanCSS = require( 'gulp-clean-css' ); 4 5 gulp.task('min-js', function() { 6 gulp.src('src/js/*.js') 7 .pipe( uglify() ) 8 .pipe( gulp.dest('dist/js') ); 9 });10 11 gulp.task('min-css', function() {12 gulp.src('src/css/*.css')13 .pipe( cleanCSS() )14 .pipe( gulp.dest('dist/css') );15 });
然后在命令行执行gulp min-css任务 就会在dist/css生成style.css压缩文件
1 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文件
1 @c1 : green; 2 @c2 : red; 3 div { 4 width:200px; 5 height:200px; 6 background:@c1; 7 div { 8 background:@c2; 9 transition:all ease 1s;10 }11 }
gulpfile.js中添加任务:
1 var gulp = require( 'gulp' ); 2 var uglify = require( 'gulp-uglify' ); 3 var cleanCSS = require( 'gulp-clean-css' ); 4 var less = require('gulp-less'); 5 6 gulp.task('min-js', function() { 7 gulp.src('src/js/*.js') 8 .pipe( uglify() ) 9 .pipe( gulp.dest('dist/js') );10 });11 12 gulp.task('min-css', function() {13 gulp.src('src/css/*.css')14 .pipe( cleanCSS() )15 .pipe( gulp.dest('dist/css') );16 });17 18 gulp.task( 'compile-less', function(){19 gulp.src( 'src/css/*.less' )20 .pipe( less() )21 .pipe( gulp.dest( 'dist/less' ) );22 } );
执行任务: gulp compile-less,在dist/less中生成style.css文件
1 div {2 width: 200px;3 height: 200px;4 background: green;5 }6 div div {7 background: red;8 transition: all ease 1s;9 }
四、合并js文件
安装插件:npm install gulp-concat --save-dev
demo2/src/js新建lib2.js文件:
1 function $( id ){2 return document.getElementById( id );3 }
在gulpfile.js中新增任务:
1 var gulp = require( 'gulp' ); 2 var uglify = require( 'gulp-uglify' ); 3 var cleanCSS = require( 'gulp-clean-css' ); 4 var less = require('gulp-less'); 5 var concat = require('gulp-concat'); 6 7 gulp.task('min-js', function() { 8 gulp.src('src/js/*.js') 9 .pipe( uglify() )10 .pipe( gulp.dest('dist/js') );11 });12 13 gulp.task( 'concat-file', function(){14 gulp.src( 'src/js/*.js' )15 .pipe( concat('all.min.js') )16 .pipe( uglify() )17 .pipe( gulp.dest( 'dist/js' ) );18 } );19 20 gulp.task('min-css', function() {21 gulp.src('src/css/*.css')22 .pipe( cleanCSS() )23 .pipe( gulp.dest('dist/css') );24 });25 26 gulp.task( 'compile-less', function(){27 gulp.src( 'src/css/*.less' )28 .pipe( less() )29 .pipe( gulp.dest( 'dist/less' ) );30 } );
执行任务:gulp concat-file
在dist/js下面生成all.min.js文件
1 function $(n){return document.getElementById(n)}var Oper={add:function(n,t){return n+t},sbb:function(n,t){return n-t}};
五、自动监测文件变化,执行任务
1 gulp.task( 'auto', function(){2 gulp.watch( 'src/js/*.js', ['min-js'] );3 gulp.watch( 'src/css/*.css', ['min-css'] );4 } );5 gulp.task( 'default', ['auto'] );
这里添加了一个默认任务default: 执行auto任务,auto里面自动监测压缩js和压缩css任务
在命令行直接执行gulp.
要执行其他任务,只需要按照这几步就可以了:
1,安装相应的插件
2,添加相应的任务
3,执行任务
- [js高手之路]gulp教程-从入门到项目中快速上手使用
- [js高手之路]gulp教程-从入门到项目中快速上手使用
- [js高手之路]gulp教程-从入门到项目中快速上手使用
- Git使用从入门到上手
- 快速上手|TensorFlow从入门到实战资料汇总
- WebService从零到项目开发使用5—技术研究之JAX-WS快速入门
- WebService从零到项目开发使用5—技术研究之JAX-WS快速入门
- Java之美[从菜鸟到高手演变]之Quartz任务调度快速入门
- gulp从入门到上树
- Gulp.js入门小教程
- gulp 快速上手
- 在Tomcat中快速上手 - 开始Hibernate入门之旅
- Gulp入门:从安装到编译Sass
- gulp入门之路
- 在项目中使用gulp压缩css和js
- zabbix 从部署到快速上手
- Android手机学习之从入门到高手
- Vue.js 2.0 详细教程 快速上手
- 安卓软键盘弹起时想向上平移布局但布局却被挤压得解决办法
- nginx——linux下的安装
- 网站收集
- 怎样拆分ABBYY FineReader中文档
- c++primer plus阅读笔记(二)
- [js高手之路]gulp教程-从入门到项目中快速上手使用
- 默认关闭数据流量
- C++中的异常处理(一)
- linux读写锁
- MongoDB-2.6.0 (OpenLogic CentOS7.2)
- Js省市二级联动
- python列表嵌套
- Apache Shiro 实现认证
- java ik分词 HttpResponseProxy{HTTP/1.1 401 Unauthorized