這篇文章將為大家詳細(xì)講解有關(guān)gulp怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

平利網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),平利網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為平利成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的平利做網(wǎ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ù)

關(guān)于“gulp怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

分享名稱：gulp怎么用
網(wǎng)站URL：http://chinadenli.net/article8/ppiiop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、靜態(tài)網(wǎng)站、網(wǎng)站收錄、網(wǎng)站改版、云服務(wù)器、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)