gulp菜鳥級零基礎詳細教程

：

相信大家一定聽說過gulp或者webpack，grunt等前端構建工具。gulp是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用它，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。 它能自動化地完成javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合並、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動后重復指定的這些步驟。

言歸正傳這篇是gulp菜鳥級別的教程。大佬們覺得太簡單了請不要噴我，畢竟我也是一個菜鳥。寫下這篇筆記，不是為了證明什么，就是方便我以后忘了時候回顧看一下。好，廢話不多說 下面開始了
1、node環境搭建

想要使用gulp，首先你得在你得電腦里面安裝node.js，因為gulp是基於Nodejs的自動任務運行器。這個我就不詳細介紹怎么安裝了吧，網上教程一搜一大把。相信正在使用gulp的朋友，也知道怎么安裝node.js

2、使用命令行工具

開發的環境安裝好了以后，接下來就是通過命令行來下載相應開發的模塊包。什么是命令行？命令行在OSX是終端（Terminal），在windows是命令提示符（Command Prompt）windows系統下　　WIN+R打開命令行工具，在里面輸入cmd,回車。如下圖：

3、選裝cnpm（淘寶鏡像）

因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常.

3.1、官方網址：http://npm.taobao.org；

3.2、安裝：命令提示符執行npm install cnpm -g --registry=https://registry.npm.taobao.org；  注意：安裝完后最好查看其版本號cnpm -v或關閉命令提示符重寫打開，安裝完直接使用有可能會出現錯誤；

注：cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm（以下操作將以cnpm代替npm）。

4、全局安裝gulp

4.1、說明：全局安裝gulp目的是為了通過她執行gulp任務；

4.2、安裝：命令提示符執行

cnpm install gulp -g

4.3、查看是否正確安裝：命令提示符執行gulp -v，出現版本號即為正確安裝。

4.4、依賴安裝： npm install gulp --save-dev，這個可以在你的當前的項目目錄下，打開命令行工具進行依賴安裝。下面我們會在介紹packge.json文件當中介紹為什么需要依賴安裝

5、新建package.json文件

5.1、package.json文件是基於node.js項目必不可少的配置文件，它是存放在項目根目錄的普通json文件，里面有你各個依賴安裝模塊插件的版本信息，以至於你能清楚看到你安裝了那些模塊。如下圖我安裝很多模塊以后的json文件。

5.2、配置packge.json文件

npm init    //初始化packge.json文件

 注意：初始化packge.json文件必須在你項目的根目錄下打開命令行工具，執行初始化代碼。（怎么在當前目錄下打開命令行工具？shift+右鍵。當然，win10系統的命令行工具被微軟改版了，叫Powershell，作用還是一樣）

6、新建gulpfile.js文件

既然我們要使用gulp,我們就需要建立一個gulpfile.js文件，gulpfile.js是gulp項目的配置文件，是位於項目根目錄的普通js文件。gulp的開發代碼都寫在這個里面的

js代碼：

const  gulp=require('gulp');    //引用gulp
const  del=require('del');      //引用gulp刪除插件
const  uglify=require('gulp-uglify');　　//引用壓縮Js插件
const  css=require('gulp-clean-css');　　//gulp壓縮css文件
const  rename = require("gulp-rename");　　//引用重命名插件

gulp.task('hello',function () {     //定義一個hello任務
    console.log('hello')
});

//task()：定義任務
//src():源文件
// pipe():管道流，接通源頭文件與目標文件的輸出
// dest():輸出文件的目的地
// watch():監視文件

//事例：
// 1、復制單個文件
gulp.task('copyHtml',function () {
    return gulp.src('./src/public/login.html').pipe(gulp.dest("dist/public"))
});

// 2、復制多個文件
gulp.task('copyAllHtml',function () {
    return gulp.src("./src/public/*.html").pipe(gulp.dest('dist/public'));
});

// 3、復制指定文件 // [指定的文件已，指定的文件2]
gulp.task('copy2Js',function () {
    return gulp.src(["./src/public/js/ajax.js",'dist/public/js/classPage.js'])
    .pipe(gulp.dest("dist/public/js"))
});

// 4、某個文件 // ！排隊的文件
gulp.task("copyNoJs",function () {
    return gulp.src(['./src/public/js/*.js','!./src/public/js/Classroom.js'])
        .pipe(gulp.dest('dist/public/js'))
});

// 5、復制多個后綴名的圖片 // {選項一，選項二}
gulp.task("copyImage",function () {
    return gulp.src('./src/public/img/*.{png,jpg,bmp,jpeg,gif}')
        .pipe(gulp.dest('dist/public/img'))
});

// 6、執行多個任務 // gulp.task('任務名稱',[任務依賴的模塊],回調函數) // 依賴任務之間沒有順序之分，異步執行 // 依賴任務之間完成后，在執行當前的回調函數
gulp.task('build',['copyAllHtml','copyNoJs','copyImage'],function () {
    console.log('編譯成功')
});

// 7、Watch:監視文件的變化
gulp.task('myWatch',function () {
    gulp.watch('./src/public/login.html',['build'])
});

// 8、刪除文件
gulp.task("del",function () {
    // del('./dist/public/img/*.{jpg,png,jepg,gif}')
    // *：所有文件
    // **：所有文件夾
    del(['./dist/public/js/*']);
    del(['./dist/**/*']);
});

gulp.task('default',function () {
    gulp.start('serve')

});

// 9、壓縮js文件
gulp.task('ysjs',function(){
    return gulp.src('./src/public/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./src/public/js'));


});

//10、 添加監聽
gulp.task('watch_js',function(){
    return gulp.watch('./src/public/js/*.js',['ysjs'])

});

//11、壓縮css文件
gulp.task('css',function () {
    return gulp.src('./src/public/sass/*.css')
        .pipe(css())
        .pipe(gulp.dest('./src/public/sass'))
});
//添加監聽
gulp.task('jtCss',function () {
    return gulp.watch('./src/public/sass/*.css',['css'])
});
//12、重命名css文件
gulp.task('reName',function () {
    return gulp.src('./src/public/sass/*.css')
        .pipe(rename({suffix: '.css'}))
        .pipe(css())
        .pipe(gulp.dest('./src/public/sass'))
});　　

7、運行gulp

7.1、說明：命令提示符執行gulp 任務名稱；

7.2、編譯less：命令提示符執行gulp testLess；

7.3、當執行gulp default或gulp將會調用default任務里的所有任務[‘testLess’,’elseTask’]

 

8、使用webstorm運行gulp任務

9、使用vscode運行gulp任務

vcode是微軟出的一款輕量級代碼編輯器，免費而且功能強大，對JavaScript和NodeJS的支持非常好，自帶很多功能，例如代碼格式化，代碼智能提示補全、Emmet插件等。

在vscode上我們想要簡單的運行gulp任務，我們可以下載一款名為“Gulp Tasks ”的插件。安裝好插件以后，我們將項目文件添加到工作區當中，然后打開gulpfile.js文件。

在左下角我們可以啟動任務

10、總結：

10.1、安裝nodejs；

10.2、新建package.json文件；

10.3、全局和本地依賴安裝gulp；

10.4、安裝gulp插件；

10.5、新建gulpfile.js文件；

10.6、通過命令提示符或者開發工具運行gulp任務。