gulp教程_從入門(mén)到項(xiàng)目中快速上手使用方法
gulp是什么?
gulp 是基于 node 實(shí)現(xiàn) Web 前端自動(dòng)化開(kāi)發(fā)的工具,利用它能夠極大的提高開(kāi)發(fā)效率。在 Web 前端開(kāi)發(fā)工作中有很多“重復(fù)工作”,比如壓縮CSS/JS文件。而這些工作都是有規(guī)律的。找到這些規(guī)律,并編寫(xiě) gulp 配置代碼,讓 gulp 自動(dòng)執(zhí)行這些“重復(fù)工作”
一、安裝gulp與壓縮js文件
命令:
npm install gulp -g
npm install gulp --save-dev
初始化項(xiàng)目package.json的配置:npm init --yes
創(chuàng)建項(xiàng)目的目錄結(jié)構(gòu)
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中,輸入任務(wù)處理代碼
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) - 定義任務(wù),第一個(gè)參數(shù)是任務(wù)名,第二個(gè)參數(shù)是任務(wù)內(nèi)容。
gulp.src(path) - 選擇文件,傳入?yún)?shù)是文件路徑。
gulp.dest(path) - 輸出文件
gulp.pipe() - 管道,你可以暫時(shí)將 pipe 理解為將操作加入執(zhí)行隊(duì)列
在命令行執(zhí)行任務(wù): gulp min-js
就會(huì)在 dist/js/lib.js 生成壓縮文件
var Oper={add:function(n,r){return n+r},sbb:function(n,r){return n-r}};
在demo2目錄下創(chuàng)建index.html,輸入以下測(cè)試代碼
<script src="./dist/js/lib.js"></script> <script> alert( Oper.add( 100, 200 ) ); </script>
發(fā)現(xiàn)壓縮好的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的任務(wù)
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') ); });
然后在命令行執(zhí)行g(shù)ulp min-css任務(wù) 就會(huì)在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中添加任務(wù):
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' ) ); } );
執(zhí)行任務(wù): 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中新增任務(wù):
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' ) ); } );
執(zhí)行任務(wù):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}};
五、自動(dòng)監(jiān)測(cè)文件變化,執(zhí)行任務(wù)
gulp.task( 'auto', function(){ gulp.watch( 'src/js/*.js', ['min-js'] ); gulp.watch( 'src/css/*.css', ['min-css'] ); } ); gulp.task( 'default', ['auto'] );
這里添加了一個(gè)默認(rèn)任務(wù)default: 執(zhí)行auto任務(wù),auto里面自動(dòng)監(jiān)測(cè)壓縮js和壓縮css任務(wù)
在命令行直接執(zhí)行g(shù)ulp.
要執(zhí)行其他任務(wù),只需要按照這幾步就可以了:
1,安裝相應(yīng)的插件
2,添加相應(yīng)的任務(wù)
3,執(zhí)行任務(wù)
以上這篇gulp教程_從入門(mén)到項(xiàng)目中快速上手使用方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)攝像頭拍照預(yù)覽
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)攝像頭拍照預(yù)覽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09JS/HTML5游戲常用算法之路徑搜索算法 A*尋路算法完整實(shí)例
這篇文章主要介紹了JS/HTML5游戲常用算法之路徑搜索算法 A*尋路算法,結(jié)合完整實(shí)例形式分析了A*尋路算法的具體實(shí)現(xiàn)技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2018-12-12javascript js cookie的存儲(chǔ),獲取和刪除
2007-12-12ES6新增數(shù)據(jù)結(jié)構(gòu)WeakSet的用法詳解
WeakSet和Set類(lèi)似,同樣是元素不重復(fù)的集合,它們的區(qū)別是WeakSet內(nèi)的元素必須是對(duì)象,不能是其它類(lèi)型。接下來(lái)通過(guò)本文給大家詳細(xì)介紹ES6新增數(shù)據(jù)結(jié)構(gòu)WeakSet的用法,感興趣的朋友一起看看吧2017-08-08javascript和HTML5利用canvas構(gòu)建猜牌游戲?qū)崿F(xiàn)算法
讓我猜猜你心中的牌,先隨機(jī)生成27張牌,不能重復(fù)列出三列牌,然后記住其中一張,然后點(diǎn)擊牌所在的列,多次就可以猜出你想的牌,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-07-07js實(shí)現(xiàn)同一個(gè)頁(yè)面,多個(gè)enter事件綁定的示例
今天小編就為大家分享一篇js實(shí)現(xiàn)同一個(gè)頁(yè)面,多個(gè)enter事件綁定的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10基于JavaScript編寫(xiě)一個(gè)在線畫(huà)板
隨著Web技術(shù)的發(fā)展,網(wǎng)頁(yè)上的交互性變得越來(lái)越重要,一個(gè)在線畫(huà)板是一個(gè)很好的例子,本文將使用HTML5的Canvas元素和JavaScript來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的在線畫(huà)板,需要的可以了解下2024-01-01JavaScript 裝逼指南(js另類(lèi)寫(xiě)法)
如何寫(xiě)JavaScript才能逼格更高呢?怎樣才能、讓別人一眼看出你不簡(jiǎn)單呢?是否很期待別人在看完你的代碼之后感嘆一句原來(lái)還可以這樣寫(xiě)呢?下面列出一些在JavaScript時(shí)的裝逼技巧,也可說(shuō)是非常實(shí)用的寫(xiě)法2020-05-05