前端開發使用工具 gulp

gulp

gulp是基於流的前端構件化工具。gulp是自動化項目的構建利器；不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成。同時使用很是簡單，學習成本低。這個壓縮工具也是前端必學的的工具。

環境搭建

• node
  由於npm跟隨node的包安裝管理工具。具體下載直接百度nodejs中文網，根據自身的環境（windows linux mac）下載安裝包（msi）。直接進行安裝。

• npm install -g gulp
  安裝成功後就能夠在命令行輸入gulp相關的命令了

安裝成功後，輸入gulp -v 查看版本

在項目中安裝 npm install --save-dev gulp，安裝成功後就能夠開始寫配置文件了。

環境開發

• vscode

• nodejs

• gulp

gulp入門

• npm init 項目初始化 ，此時根目錄會出現package.json

• npm install gulp --save-dev 在本地項目局部安裝gulp

• 建立gulpfile.js文件

//  如下代碼會執行在node環境下
var gulp = require( "gulp" );

//  建立一個gulp的任務
gulp.task( "default",function(done){
    console.log( "hello gulp" );
    done();
} );

在命令行執行gulp default

壓縮css

• npm install gulp-cssnano --save -dev 在本地項目安裝gulp-cssnano

• 新建一個css文件夾，在新建index.css

*{
    margin: 0;
    padding: 0;
}


p{
    color: red
}

• gulpfile.js代碼以下

var gulp = require('gulp');
// 須要先安裝gulp-cssnano
var cssnano = require('gulp-cssnano');
// 定義一個處理css文件改動的任務

gulp.task('css',function(){
    gulp.src('./css/*.css')
    .pipe(cssnano()) 
    .pipe(gulp.dest("./dist/css/"))
});

• 新建dist文件夾來存放生成的css任務

• 執行 gulp css

• 在dist文件夾的css文件夾生成了index.css

*{margin:0;padding:0}p{color:red}

gulp 修改壓縮的文件名

• npm install gulp-rename --save-dev 在本地項目安裝

• gulpfile.js代碼修改以下

var gulp = require('gulp');
// 須要先安裝gulp-cssnano
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename')
// 定義一個處理css文件改動的任務
gulp.task('css',function(){
    // 處理css文件的目錄
    return gulp.src('./css/*.css')
    .pipe(cssnano()) 
    // 將index.css生成index.min.css
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./dist/css/"))
});

執行 gulp css，這樣將index.css命名爲index.min.css

js壓縮

• npm install gulp-uglify --save-dev 安裝js壓縮插件

• 一樣的道理新建js文件夾新建index.js

代碼是生成斐波那契數組

function getFibonacci(n) {  
    var fibarr = [];
    var i = 0;
    while(i<n) {
      if(i<=1) {
        fibarr.push(i);
      }else{
        fibarr.push(fibarr[i-1] + fibarr[i-2])
      }
      i++;
    }
    return fibarr;
  }

• gulpfile.js代碼修改以下

var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify')

// 對js請求進行壓縮和混淆
// 定義任務
gulp.task('myscript', function() {
  // 1.匹配要處理的文件
   return gulp.src('src/js/*.js')
      // 2.將js代碼壓縮混淆
       .pipe(uglify())
       .pipe(rename({"suffix":".min"}))
       .pipe(gulp.dest('./dist/js'))
})

• 執行 gulp myscript
  

• index.min.js代碼就會壓縮

function getFibonacci(n){for(var r=[],u=0;u<n;)u<=1?r.push(u):r.push(r[u-1]+r[u-2]),u++;return r}

html 壓縮

• npm install gulp-htmlmin --save-dev

• 新建html文件夾在新建index.html

• gulpfile.js代碼修改以下

var gulp = require('gulp');
var rename = require('gulp-rename');
// 對html進行壓縮的包
var htmlmin = require('gulp-htmlmin')
// 對html進行壓縮
// 定義任務
gulp.task('myhtml', function(){
   // 1.匹配到要處理的html文件
   return gulp.src('./html/*.html')
        // 2.對html進行壓縮!
        .pipe(htmlmin({
          collapseWhitespace:true // 去除空白符
          }))
          // 3.輸出
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest('dist/html'))
})

• 執行 gulp myhtml

• index.html就會被壓縮

使用gulp 壓縮代碼能使項目運行更加的流暢。

最後，祝有所學習，有所成長

轉發，好看支持一下，感謝

你的轉發，就是對我最大的支持