Gulp 筆記

2017-07-14

一些關於 gulp 的筆記

Gulp 入門教學 -- 安裝 Gulp.js

前端自動化神器 Gulp

架設簡易開發用的WEB SERVER

用 LESS 寫 CSS ( 入門、Import、變數 )

在專案目錄中 依序執行下列命令 (要先安裝 npm, gulp-cli)

// 初始化 node.js
npm init

// 安裝所需的 gulp 套件
npm install gulp gulp-less gulp-webserver --save-dev

// 執行 gulp 任務
gulp

gulpfile.js 的內容 (需要手動建立 gulpfile.js 檔案)

var gulp = require('gulp');
var less = require('gulp-less');
var webserver = require('gulp-webserver');

gulp.task('less',function(){
    gulp.src('./src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('./build/css/'))
});

gulp.task('watch',function(){
    gulp.watch('./src/less/*.less',['less']);
});

gulp.task('webserver', function() {
  gulp.src('./build/')
    .pipe(webserver({
      port:3000,
      livereload: true,
      directoryListing: false,
      open: true
  }));
});

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

專案目錄設定為

  • node_modules/

    • 所需套件
  • src/

    • less/

      • style.less
  • build/

    • css/

      • style.css
    • index.html
  • package.json
  • gulpfile.js

發表迴響

彙整

分類