gulp入門教程

 

 　　　

　　gulp是什麼？

　　　　gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器；它不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用它，咱們不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率。

 

　　　gulp是基於Nodejs的自動任務運行器， 它能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，它借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。經過本文，咱們將學習如何使用Gulp來改變開發流程，從而使開發更加快速高效。

 

　　　gulp 和 grunt 很是相似，但相比於 grunt 的頻繁 IO 操做，gulp 的流操做，能更快地更便捷地完成構建工做。

 

　　安裝gulp的一些步驟

 　　　　首先固然是安裝nodejs，經過nodejs的npm全局安裝和項目安裝gulp，其次在項目裏安裝所須要的gulp插件，而後新建gulp的配置文件gulpfile.js並寫好配置信息（定義gulp任務），最後經過命令提示符運行gulp任務便可。

 

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

一、安裝nodejs

　　說明：gulp是基於nodejs，理所固然須要安裝nodejs；

　　安裝：打開nodejs官網，點擊碩大的綠色Download按鈕，它會根據系統信息選擇對應版本（.msi文件）。

二、使用命令行（若是你熟悉命令行，能夠直接跳到第3步）

　　說明：什麼是命令行？命令行在OSX是終端（Terminal），在windows是命令提示符（Command Prompt）；

　　注：以後操做都是在windows系統下；

　　簡單介紹gulp在使用過程當中經常使用命令，打開命令提示符執行下列命令（打開方式：window + r 輸入cmd回車）：

　　node -v查看安裝的nodejs版本，出現版本號，說明剛剛已正確安裝nodejs。PS：未能出現版本號，請嘗試註銷電腦重試；

　　npm -v查看npm的版本號，npm是在安裝nodejs時一同安裝的nodejs包管理器，那它有什麼用呢？稍後解釋；

　　cd定位到目錄，用法：cd + 路徑 ；

　　dir列出文件列表；

　　cls清空命令提示符窗口內容。

三、npm介紹

　　說明：npm（node package manager）nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）；

　　使用npm安裝插件：命令提示符執行npm install <name> [-g] [--save-dev]；

　　<name>：node插件名稱。例：npm install gulp-less --save-dev

　　使用npm卸載插件：npm uninstall <name> [-g] [--save-dev]  PS：不要直接刪除本地插件包

　　刪除所有插件：npm uninstall gulp-less gulp-uglify gulp-concat

　　藉助rimraf：npm install rimraf -g 用法：rimraf node_modules

　　使用npm更新插件：npm update <name> [-g] [--save-dev]

　　更新所有插件：npm update [--save-dev]

　　查看npm幫助：npm help

　　當前目錄已安裝插件：npm list

四、全局安裝gulp

　　說明：全局安裝gulp目的是爲了經過她執行gulp任務；

　　安裝：命令提示符執行cnpm install gulp -g；

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

 

安裝一些插件：

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

　　　　安裝html插件======npm install gulp-htmlmin --save-dev

　　　　安裝css插件======npm install gulp-minify-css --save-dev

　　　　安裝編譯sass插件======npm install gulp-less --save-dev

先引入依賴：

//引入依賴
var gulp = require('gulp');

接着引入插件：

//js壓縮
var uglify = require('gulp-uglify');
//更換名稱
var rename = require('gulp-rename');
//css壓縮
var cssmin = require('gulp-minify-css');
//html 壓縮
var htmlmin = require('gulp-htmlmin');

　配置任務：

//壓縮js
gulp.task('uglifyJS', function(){
    gulp.src('index/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dest/js'));
});
    //編譯less  html/js--》dest/css
gulp.task('testLess', function () {
    return gulp.src(['index/less/*.less'])
        .pipe(less())
        .pipe(gulp.dest('dest/css'));
});
    //壓縮css
gulp.task('minicss', ['testLess'], function () {
 //執行完testLess任務後再執行minicss任務
    gulp.src(['index/css/*.css'])
        .pipe(cssmin())
        .pipe(gulp.dest('dest/cssmin'));
});
    //壓縮html
gulp.task('html', function() {
    gulp.src('index/*.html')
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dest/html'));
});

最後註冊默認任務：

gulp.task('default', [ 'uglifyJS','testLess','minicss','html']);

 

 

此文有我從別的網站摘要的一些內容分享，也有我本身的一些理解，如有錯誤請大神多多指教！！！