使用gulp進(jìn)行快速開發(fā)

前言

本文主要分為以下幾部分來講。

less及sass的使用

  1. 插件的安裝
  • 環(huán)境配置
  • gulpfile.js
  • 使用方法

同步自動(dòng)刷新

  1. 插件安裝
  • gulpfile.js
  • 使用方法

疑問

less及sass的使用

插件的安裝

  1. 首先我們需要先安裝node.js,傻瓜式安裝，這里就不詳細(xì)介紹。
  • 安裝完成后，打開node.js，安裝淘寶鏡像，以提高安裝的成功率。
    <code>$ npm install -g cnpm --registry=https://registry.npm.taobao.org</code>
    安裝完淘寶鏡像之后就可以使用cnpm進(jìn)行安裝了。
  • 安裝gulp
    $ cnpm install gulp -g
  • 安裝less
    $ cnpm install gulp-less -g
  • 安裝gulp-connect
    $ cnpm install gulp-connect -g
  • 安裝sass
    $ cnpm install gulp-sass -g

請(qǐng)確保你所有的插件都安裝成功

環(huán)境配置

在用戶變量中新建一個(gè)用戶名為 node_path 的用戶。
其值為插件的地址（例如我的是C:\Users\Administrator\AppData\Roaming\npm\node_modules）（一般情況下，地址都大致相同）


注意
一般在我們的電腦中AppData默認(rèn)是隱藏的，所以你需要的文件夾中顯示隱藏文件
打開文件夾>工具>文件夾選項(xiàng)>顯示隱藏的文件、文件夾和驅(qū)動(dòng)器>確定
（這里寫的是win7的方法）


gulpfile.js

新建一個(gè)名為gulpfile.js的文件，并把下面的代碼拷貝到文件里面，然后保存。

var gulp = require('gulp');//加載gulp工具
var less = require('gulp-less');//加載LESS插件
var sass = require('gulp-sass');//加載SESS插件
var connect = require('gulp-connect');//啟動(dòng)一個(gè)服務(wù)器

//使用connect啟動(dòng)一個(gè)www服務(wù)器
gulp.task('connect', function () {
  connect.server({
    root: 'www',
    port: 9999,
    livereload: true
  });
});

// Styles
gulp.task('less', function() {
    //編譯less
    return gulp.src('./www/css/*.less')
    .pipe(less())
    //保存未壓縮文件到我們指定的目錄下面
    .pipe(gulp.dest('./www/css'))
    .pipe(connect.reload())
});

// Styles
gulp.task('sass', function() {
    //編譯sass
    return gulp.src('./www/css/*.scss')
    .pipe(sass())
    //保存未壓縮文件到我們指定的目錄下面
    .pipe(gulp.dest('./www/css'))
    .pipe(connect.reload())
});



gulp.task('html', function () {
  gulp.src('./www/*.html')
    .pipe(connect.reload());
});

//watch監(jiān)聽
gulp.task('watch', function () {
  gulp.watch(['./www/*.html','./www/css/*.less','./www/css/*.scss'], ['less','html','sass']);
});


gulp.task('default', ['connect', 'watch']);

使用方法

創(chuàng)建項(xiàng)目
  1. 創(chuàng)建一個(gè)文件夾。（例如我創(chuàng)建了一個(gè)名為yimi的文件夾）

  • 在文件夾里面創(chuàng)建一個(gè)名為“www”的文件夾，用于存放你的項(xiàng)目，并將我們剛剛書寫的gulpfile.js復(fù)制一份進(jìn)來。


  • www里邊存放我項(xiàng)目的文件（首頁名稱必須為index.html，并且存放在根目錄下）。


sass的使用

這里列舉sass的使用方法來介紹。

  • sass有兩種格式，一種為sass、一種是scss。（此處使用的是scss）

  • 在css文件夾中新建一個(gè)名為style.scss的文件，這就是你的scss文件了。


  • index.html引用scss的方法

只需像引入css文件一樣引入即可
<link rel="stylesheet" type="text/css" href="css/style.css" />

gulp的使用
  1. 打開node.js
  • 進(jìn)入文件夾地址
    cd+空格+文件夾地址
    例如（cd C:\Users\Administrator\Desktop\yimi）

  • gulp


  • 你的style.scss將會(huì)被編譯成style.css，這時(shí)候可以發(fā)現(xiàn)你的css文件夾中多了一個(gè)style.css的文件。
  • 在瀏覽器地址欄中輸入http://localhost:9999/就可以訪問你的網(wǎng)站了。

同步自動(dòng)刷新

這是一個(gè)特別好用的插件，在你的代碼書寫完成之后，按下保存的同時(shí)，可以讓你的瀏覽器自動(dòng)刷新。

插件安裝

請(qǐng)安裝完上面的插件，再安裝下面的插件。

  1. 打開node.js
  • 安裝同步工具
    $ npm install -g browser-sync
  • 安裝gulp-autoprefixe
    $ npm install --save-dev gulp-autoprefixer

gulpfile.js

新建一個(gè)名為gulpfile.js的文件，并把下面的代碼拷貝到文件里面，然后保存。(此處的gulpfile.js與上面不同，這里只使用sass，不支持less，可根據(jù)需要進(jìn)行修改)

//導(dǎo)入工具包 require('node_modules里對(duì)應(yīng)模塊')
var gulp = require('gulp'),//加載gulp工具
    sass = require('gulp-sass'),//加載SASS插件
    //connect = require('gulp-connect'),//啟動(dòng)一個(gè)服務(wù)器
    autoprefixer = require('gulp-autoprefixer');
    browserSync = require('browser-sync').create();
    reload = browserSync.reload;

//定義一個(gè)testLess任務(wù)（自定義任務(wù)名稱）

//使用connect啟動(dòng)一個(gè)Web服務(wù)器
/*
gulp.task('connect', function () {
  connect.server({
    root: 'www',
    port: 7777,
    livereload: true
  });
});
*/
// Styles
gulp.task('sass', function() {
  //編譯scss
    return gulp.src('./www/css/*.scss')//該任務(wù)針對(duì)的文件
    .pipe(sass())//該任務(wù)調(diào)用的模塊
    //保存未壓縮文件到我們指定的目錄下面
    .pipe(sass({outputStyle: 'nested'}).on('error', sass.logError))
    .pipe(gulp.dest('./www/css'))//將會(huì)在./www/css下生成index.css
    //.pipe(connect.reload())
    .pipe(reload({stream: true}));

});

gulp.task('autoprefixer',function(){
  gulp.src('./www/css/*.css')
    .pipe(autoprefixer({
      browsers: ['>1%'],
      cascade: false,  //是否美化屬性值 默認(rèn)：true 像這樣：
      //-webkit-transform: rotate(45deg);
      //        transform: rotate(45deg);
      remove: false  //是否去掉不必要的前綴 默認(rèn)：true 
    }))
    .pipe(gulp.dest('./www/css'))
    // .pipe(connect.reload())
});
/*
gulp-autoprefixer的browsers參數(shù)詳解：
    last 2 versions: 主流瀏覽器的最新兩個(gè)版本
    last 1 Chrome versions: 谷歌瀏覽器的最新版本
    last 2 Explorer versions: IE的最新兩個(gè)版本
    last 3 Safari versions: 蘋果瀏覽器最新三個(gè)版本
    Firefox >= 20: 火狐瀏覽器的版本大于或等于20
    iOS 7: IOS7版本
    Firefox ESR: 最新ESR版本的火狐
    > 5%: 全球統(tǒng)計(jì)有超過5%的使用率
各瀏覽器的標(biāo)識(shí)：
    Android for Android WebView.
    BlackBerry or bb for Blackberry browser.
    Chrome for Google Chrome.
    Firefox or ff for Mozilla Firefox.
    Explorer or ie for Internet Explorer.
    iOS or ios_saf for iOS Safari.
    Opera for Opera.
    Safari for desktop Safari.
    OperaMobile or op_mob for Opera Mobile.
    OperaMini or op_mini for Opera Mini.
    ChromeAndroid or and_chr
    FirefoxAndroid or and_ff for Firefox for Android.
    ExplorerMobile or ie_mob for Internet Explorer Mobile.
*/


gulp.task('browser-sync',['sass'],function(){

  browserSync.init({
      //代理
      //proxy: "localhost:7777"
      //靜態(tài)服務(wù)器
      
      server:{
        baseDir:"./www"
      }
      
  });
  

  gulp.watch(['./www/css/*.scss'],['sass']);
  gulp.watch(['./www/*.html','./www/js/*.js']).on('change',reload);
});


gulp.task('default', ['browser-sync']);//定義默認(rèn)任務(wù)

//gulp.task(name[, deps], fn) 定義任務(wù)  name：任務(wù)名稱 deps：依賴任務(wù)名稱 fn：回調(diào)函數(shù)
//gulp.src(globs[, options]) 執(zhí)行任務(wù)處理的文件  globs：處理的文件路徑(字符串或者字符串?dāng)?shù)組) 
//gulp.dest(path[, options]) 處理完后文件生成路徑

使用方法

創(chuàng)建項(xiàng)目，sass的使用與上面的步驟相同，請(qǐng)參考上面的方法。
gulp的使用
  1. 打開node.js
  • 進(jìn)入文件夾地址
    cd+空格+文件夾地址
    例如（cd C:\Users\Administrator\Desktop\yimi）

  • gulp


  • 你的style.scss將會(huì)被編譯成style.css，這時(shí)候可以發(fā)現(xiàn)你的css文件夾中多了一個(gè)style.css的文件。
  • 這時(shí)候你網(wǎng)頁就會(huì)被自動(dòng)打開。
  • 當(dāng)你保存你的代碼的時(shí)候，你的網(wǎng)頁就會(huì)被自動(dòng)刷新。
移動(dòng)端訪問方法
  1. 使用電腦打開一個(gè)wifi，用你的手機(jī)鏈接電腦的wifi
  • 打開手機(jī)瀏覽器訪問
    你的無線ip:3000

無線ip查看方法
win+R>輸入cmd>回車>在命令行中輸入ipconfig>無線局域網(wǎng)適配器> IPv4 地址
例如：192.168.191.1:3000

疑問

在步驟結(jié)束之后偶爾會(huì)出現(xiàn)下面這種情況，表示至今還不知道如何解決這個(gè)問題，希望知道方法的大神們留下您的高見，萬分感謝?。?！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在現(xiàn)在的前端開發(fā)中，前后端分離、模塊化開發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,659評(píng)論 1贊 32
  • 安裝Gulp首先需要安裝Node.js，并在控制臺(tái)輸入$ npm install gulp -gMac端需要寫成$...
    LaBaby_閱讀 1,023評(píng)論 0贊 1
  • 前言 本文默認(rèn)你已經(jīng)安裝好node環(huán)境，并且熟悉node命令，和window cd命令。 gulp簡(jiǎn)介 基于nod...
    9I閱讀 2,041評(píng)論 4贊 50
  • 原文標(biāo)題：Gulp for Beginners作者： Zell Liew翻譯：治電小白菜原文地址：https://...
    ZZES_ZCDC閱讀 1,721評(píng)論 6贊 18
  • 參照Gulp for Beginners來學(xué)習(xí)Gulp基本內(nèi)容。以下為學(xué)習(xí)記錄筆記。 安裝Gulp 首先需要安裝N...
    JenniferYe閱讀 2,668評(píng)論 1贊 17

友情鏈接更多精彩內(nèi)容