这篇文章将为大家详细讲解有关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
创建项目的目录结构
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怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
分享名称:gulp怎么用
网站URL:https://www.cdcxhl.com/article8/ppiiop.html
成都网站建设公司_创新互联,为您提供微信公众号、静态网站、网站收录、网站改版、云服务器、自适应网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联