分享HTML5自動化構(gòu)建工具gulp使用方法步驟

ulp是是前端開發(fā)對代碼進行構(gòu)建的工具，是基于 Nodejs 的自動任務(wù)運行器，他能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監(jiān)聽文件在改動后重復指定的這些步驟。在開發(fā)中使用能有效提高工作效率，使用：

既是基于Nodejs的任務(wù)運行器，自然就需要先安裝Nodejs環(huán)境，以下便是安裝步驟：

安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運行任務(wù)

1. 安裝 NodeJS 環(huán)境

到nodeJS官網(wǎng)選擇下載，運行安裝包安裝即可。

2.初始化，生成package.json 文件：

在項目文件夾下打開命令提示符執(zhí)行下列命令（打開方式：shift+鼠標右鍵，在此處打開明亮窗口）：

npm init

選裝 cnpm( npm淘寶鏡像 )：

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 全局安裝 gulp

npm install gulp -g

全局安裝好后，可以在命令提示符下使用 gulp 的命令行工具（使用 gulp 命令）

gulp -v

**以上全局安裝一次即可**

4. 在項目目錄中生成 package.json 文件

npm init

使用默認輸入，一路回車即可

或：npm init -y

5. 在項目本地安裝 gulp(安裝好后，在項目目錄下生成 node_modules 文件夾)

npm install gulp --save-dev

或

npm i gulp --save-dev

或

npm i gulp -D

6. 安裝 gulp 插件：

gulp-clean-css(壓縮CSS)

npm install gulp-clean-css -D

gulp-htmlmin(壓縮html)

npm i gulp-htmlmin -D

gulp-babel(將ES6的代碼轉(zhuǎn)換為ES5的代碼)

npm install gulp-babel babel-core babel-preset-env --save-dev

gulp-uglify(壓縮JS)

npm i gulp-uglify -D

gulp-rename(重命名)

npm i gulp-rename -D

gulp-imagemin(壓縮圖片)

gulp-concat(合并文件)

gulp-connect ( webserver 能夠部署靜態(tài)資源，能夠?qū)崿F(xiàn)瀏覽器自動刷新--需要瀏覽器插件支持--livereload)

npm i gulp-connect（連接）

7. 在項目根目錄下，創(chuàng)建 gulpfile.js(固定名稱) 的文件：

**gulpfile.js：**

//引入模塊

const gulp = require("gulp"),

connect = require("gulp-connect"),

sass = require("gulp-sass");

//定制，啟動服務(wù)器

gulp.task("connect",function(){

connect.server({

root:"dist",//webserver的根目錄

livereload:true//瀏覽器自動刷新

});

//復制HTML文件到dist目錄下，讓HTML頁面重新加載

gulp.task("html",function(){

gulp.src("src/**/*.html")

.pipe(gulp.dest("dist"))

.pipe(connect.reload());

});

//復制js文件到dist目錄下,js重新加載

gulp.task("js",function(){

gulp.src("src/js/**/*.js")

.pipe(gulp.dest("dist/js"))

.pipe(connect.reload());//瀏覽器自動刷新

});

//復制lib目錄到dist下

gulp.task("copy-lib",function(){

gulp.src("src/lib/**/*.*")

.pipe(gulp.dest("dist/lib"))

});

//復制img目錄到dist下

gulp.task("copy-img",function(){

gulp.src("src/img/**/*.*")

.pipe(gulp.dest("dist/img"))

});

//復制mock目錄到dist下

gulp.task("copy-mock",function(){

gulp.src("src/mock/**/*.*")

.pipe(gulp.dest("dist/mock"))

});

gulp.task("copy",["copy-lib","copy-img","copy-mock"])

//編譯*.scss文件為*.css

gulp.task("sass",function(){

gulp.src("src/sass/*.scss")

.pipe(sass({outputStyle:"compressed"}))

.pipe(gulp.dest("dist/css"))

.pipe(connect.reload());

})

//監(jiān)視文件的修改

gulp.task("watch",function(){

gulp.watch("src/sass/*.scss",["sass"]);

gulp.watch("src/**/*.html",["html"]);

gulp.watch("src/js/**/*.js",["js"]);

});

//定制默認（缺省）任務(wù)

gulp.task("default",["html","js","sass","copy","connect","watch"])

8. 在命令行中執(zhí)行任務(wù)：

gulp 任務(wù)名稱

或 gulp

9.本地訪問localhost或本機IP即可運行項目

Gulp運行成功結(jié)果如下：

既是基于Nodejs的任務(wù)運行器，自然就需要先安裝Nodejs環(huán)境，以下便是安裝步驟：

安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運行任務(wù)

1. 安裝 NodeJS 環(huán)境

到nodeJS官網(wǎng)選擇下載，運行安裝包安裝即可。

2.初始化，生成package.json 文件：

在項目文件夾下打開命令提示符執(zhí)行下列命令（打開方式：shift+鼠標右鍵，在此處打開明亮窗口）：

npm init

選裝 cnpm( npm淘寶鏡像 )：

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 全局安裝 gulp

npm install gulp -g

全局安裝好后，可以在命令提示符下使用 gulp 的命令行工具（使用 gulp 命令）

gulp -v

**以上全局安裝一次即可**

4. 在項目目錄中生成 package.json 文件

npm init

使用默認輸入，一路回車即可

或：npm init -y

5. 在項目本地安裝 gulp(安裝好后，在項目目錄下生成 node_modules 文件夾)

npm install gulp --save-dev

或

npm i gulp --save-dev

或

npm i gulp -D

6. 安裝 gulp 插件：

gulp-clean-css(壓縮CSS)

npm install gulp-clean-css -D

gulp-htmlmin(壓縮html)

npm i gulp-htmlmin -D

gulp-babel(將ES6的代碼轉(zhuǎn)換為ES5的代碼)

npm install gulp-babel babel-core babel-preset-env --save-dev

gulp-uglify(壓縮JS)

npm i gulp-uglify -D

gulp-rename(重命名)

npm i gulp-rename -D

gulp-imagemin(壓縮圖片)

gulp-concat(合并文件)

gulp-connect ( webserver 能夠部署靜態(tài)資源，能夠?qū)崿F(xiàn)瀏覽器自動刷新--需要瀏覽器插件支持--livereload)

npm i gulp-connect（連接）

7. 在項目根目錄下，創(chuàng)建 gulpfile.js(固定名稱) 的文件：

**gulpfile.js：**

//引入模塊

const gulp = require("gulp"),

connect = require("gulp-connect"),

sass = require("gulp-sass");

//定制，啟動服務(wù)器

gulp.task("connect",function(){

connect.server({

root:"dist",//webserver的根目錄

livereload:true//瀏覽器自動刷新

});

//復制HTML文件到dist目錄下，讓HTML頁面重新加載

gulp.task("html",function(){

gulp.src("src/**/*.html")

.pipe(gulp.dest("dist"))

.pipe(connect.reload());

});

//復制js文件到dist目錄下,js重新加載

gulp.task("js",function(){

gulp.src("src/js/**/*.js")

.pipe(gulp.dest("dist/js"))

.pipe(connect.reload());//瀏覽器自動刷新

});

//復制lib目錄到dist下

gulp.task("copy-lib",function(){

gulp.src("src/lib/**/*.*")

.pipe(gulp.dest("dist/lib"))

});

//復制img目錄到dist下

gulp.task("copy-img",function(){

gulp.src("src/img/**/*.*")

.pipe(gulp.dest("dist/img"))

});

//復制mock目錄到dist下

gulp.task("copy-mock",function(){

gulp.src("src/mock/**/*.*")

.pipe(gulp.dest("dist/mock"))

});

gulp.task("copy",["copy-lib","copy-img","copy-mock"])

//編譯*.scss文件為*.css

gulp.task("sass",function(){

gulp.src("src/sass/*.scss")

.pipe(sass({outputStyle:"compressed"}))

.pipe(gulp.dest("dist/css"))

.pipe(connect.reload());

})

//監(jiān)視文件的修改

gulp.task("watch",function(){

gulp.watch("src/sass/*.scss",["sass"]);

gulp.watch("src/**/*.html",["html"]);

gulp.watch("src/js/**/*.js",["js"]);

});

//定制默認（缺省）任務(wù)

gulp.task("default",["html","js","sass","copy","connect","watch"])

8. 在命令行中執(zhí)行任務(wù)：

gulp 任務(wù)名稱

或 gulp

9.本地訪問localhost或本機IP即可運行項目

Gulp運行成功結(jié)果如下：

Author : Runsen

@Date : 2019/12/19

gulp

gulp是基于流的前端構(gòu)件化工具。gulp是自動化項目的構(gòu)建利器；不僅能對網(wǎng)站資源進行優(yōu)化，而且在開發(fā)過程中很多重復的任務(wù)能夠使用正確的工具自動完成。同時使用非常簡單，學習成本低。這個壓縮工具也是前端必學的的工具。

環(huán)境搭建

node 因為npm跟隨node的包安裝管理工具。具體下載直接百度nodejs中文網(wǎng)，根據(jù)自身的環(huán)境（windows linux mac）下載安裝包（msi）。直接進行安裝。
npm install -g gulp 安裝成功后就可以在命令行輸入gulp相關(guān)的命令了

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

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

環(huán)境開發(fā)

vscode
nodejs
gulp

gulp入門

npm init 項目初始化，此時根目錄會出現(xiàn)package.json

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

創(chuàng)建gulpfile.js文件

//  以下代碼會執(zhí)行在node環(huán)境下
var gulp = require( "gulp" );

//  創(chuàng)建一個gulp的任務(wù)
gulp.task( "default",function(done){
    console.log( "hello gulp" );
    done();
} );

在命令行執(zhí)行g(shù)ulp 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文件改動的任務(wù)

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

新建dist文件夾來存放生成的css任務(wù)

執(zhí)行 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文件改動的任務(wù)
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/"))
});

執(zhí)行 gulp css，這樣將index.css命名為index.min.css

js壓縮

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

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

代碼是生成斐波那契數(shù)組

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

執(zhí)行 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進行壓縮
// 定義任務(wù)
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'))
})

執(zhí)行 gulp myhtml

index.html就會被壓縮

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

在線咨詢

上一篇：html5小游戲源代碼程序設(shè)計html源碼網(wǎng)頁電子版資料素材
下一篇：不知道就虧了！6個國家出品的實用網(wǎng)站

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

分享HTML5自動化構(gòu)建工具gulp使用方法步驟

gulp

gulp入門

您的項目需求