DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 基於Node.js的JavaScript項目構建工具gulp的使用教程
基於Node.js的JavaScript項目構建工具gulp的使用教程
編輯:關於JavaScript     
npm install gulp --save-dev 

什麼是gulp?
gulp是新一代的前端項目構建工具,你可以使用gulp及其插件對你的項目代碼(less,sass)進行編譯,還可以壓縮你的js和css代碼,甚至壓縮你的圖片,gulp僅有少量的API,所以非常容易學習。 gulp 使用 stream 方式處理內容。Node催生了一批自動化工具,像Bower,Yeoman,Grunt等。

gulp和grunt的異同點
易於使用:采用代碼優於配置策略,Gulp讓簡單的事情繼續簡單,復雜的任務變得可管理。
高效:通過利用Node.js強大的流,不需要往磁盤寫中間文件,可以更快地完成構建。
高質量:Gulp嚴格的插件指導方針,確保插件簡單並且按你期望的方式工作。
易於學習:通過把API降到最少,你能在很短的時間內學會Gulp。構建工作就像你設想的一樣:是一系列流管道。
因為gulp是用node.js寫的,所以你需要在你的終端上安裝好npm。npm是node.js的包管理器,所以先在你的機子上安裝好node.js吧。

gulp安裝命令

sudo npm install -g gulp

在根目錄下新建package.json文件

npm init .

安裝gulp包

安裝好後再次輸入gulp -v查看版本號,如下圖顯示則為成功:

2016520182145165.jpg (570×166)

安裝插件
安裝常用插件:

sass的編譯                  (gulp-ruby-sass)
自動添加css前綴              (gulp-autoprefixer)
壓縮css                    (gulp-minify-css)
js代碼校驗                  (gulp-jshint)
合並js文件                  (gulp-concat)
壓縮js代碼                  (gulp-uglify)
壓縮圖片                    (gulp-imagemin)
自動刷新頁面                 (gulp-livereload)
圖片緩存,只有圖片替換了才壓縮  (gulp-cache)
更改提醒                    (gulp-notify)
清除文件                    (del)
安裝這些插件需要運行如下命令:

復制代碼 代碼如下:

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev


-save和-save-dev可以省掉你手動修改package.json文件的步驟。

npm install module-name -save

 自動把模塊和版本號添加到dependencies部分

npm install module-name -save-dev 

自動把模塊和版本號添加到devdependencies部分
gulp命令
你僅僅需要知道的5個gulp命令

gulp.task(name[, deps], fn) 定義任務  name:任務名稱 deps:依賴任務名稱 fn:回調函數

gulp.run(tasks...):盡可能多的並行運行多個task

gulp.watch(glob, fn):當glob內容發生改變時,執行fn

gulp.src(glob):置需要處理的文件的路徑,可以是多個文件以數組的形式,也可以是正則

gulp.dest(path[, options]):設置生成文件的路徑
glob:可以是一個直接的文件路徑。他的含義是模式匹配。
gulp將要處理的文件通過管道(pipe())API導向相關插件。通過插件執行文件的處理任務。

gulp.task('default', function () {...});

gulp.task這個API用來創建任務,在命令行下可以輸入$ gulp [default],(中括號表示可選)來執行上面的任務。

gulp官方API文檔:https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 插件大全:http://gulpjs.com/plugins/
開始構建項目
在項目根目錄下新建一個gulpfile.js文件,粘貼如下代碼:

//在項目根目錄引入gulp和uglify插件
var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('compress',function(){
  return gulp.src('script/*.js')
  .pipe(uglify())
  .pipe(gulp.dest('dist'));
});

注:gulpfile.js文件名不可更改。
項目需要用到uglify和rename插件,執行以下命令安裝:

npm install --save-dev gulp-uglify
npm install --save-dev gulp-rename

以我的為例,進入gulpfile.js所在目錄:

cd /Users/trigkit4/gulp-test

然後輸入:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('compress',function(){
  return gulp.src('script/*.js')
  .pipe(uglify())
  .pipe(rename('jquery.ui.min.js'))
  .pipe(gulp.dest('dist'));
});

該命令會安裝package.json下的全部依賴,如下圖所示:

2016520182629058.jpg (800×319)

完整的gulpfile.js

// 載入外掛
var gulp = require('gulp'), 
  sass = require('gulp-ruby-sass'),
  autoprefixer = require('gulp-autoprefixer'),
  minifycss = require('gulp-minify-css'),
  jshint = require('gulp-jshint'),
  uglify = require('gulp-uglify'),
  imagemin = require('gulp-imagemin'),
  rename = require('gulp-rename'),
  clean = require('gulp-clean'),
  concat = require('gulp-concat'),
  notify = require('gulp-notify'),
  cache = require('gulp-cache'),
  livereload = require('gulp-livereload');
 
// 樣式
gulp.task('styles', function() { 
 return gulp.src('src/styles/main.scss')
  .pipe(sass({ style: 'expanded', }))
  .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
  .pipe(gulp.dest('dist/styles'))
  .pipe(rename({ suffix: '.min' }))
  .pipe(minifycss())
  .pipe(gulp.dest('dist/styles'))
  .pipe(notify({ message: 'Styles task complete' }));
});
 
// 腳本
gulp.task('scripts', function() { 
 return gulp.src('src/scripts/**/*.js')
  .pipe(jshint('.jshintrc'))
  .pipe(jshint.reporter('default'))
  .pipe(concat('main.js'))
  .pipe(gulp.dest('dist/scripts'))
  .pipe(rename({ suffix: '.min' }))
  .pipe(uglify())
  .pipe(gulp.dest('dist/scripts'))
  .pipe(notify({ message: 'Scripts task complete' }));
});
 
// 圖片
gulp.task('images', function() { 
 return gulp.src('src/images/**/*')
  .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
  .pipe(gulp.dest('dist/images'))
  .pipe(notify({ message: 'Images task complete' }));
});
 
// 清理
gulp.task('clean', function() { 
 return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
  .pipe(clean());
});
 
// 預設任務
gulp.task('default', ['clean'], function() { 
  gulp.start('styles', 'scripts', 'images');
});
 
// 看守
gulp.task('watch', function() {
 
 // 看守所有.scss檔
 gulp.watch('src/styles/**/*.scss', ['styles']);
 
 // 看守所有.js檔
 gulp.watch('src/scripts/**/*.js', ['scripts']);
 
 // 看守所有圖片檔
 gulp.watch('src/images/**/*', ['images']);
 
 // 建立即時重整伺服器
 var server = livereload();
 
 // 看守所有位在 dist/ 目錄下的檔案,一旦有更動,便進行重整
 gulp.watch(['dist/**']).on('change', function(file) {
  server.changed(file.path);
 });
 
});

注:pipe()是stream模塊裡傳遞數據流的一個方法,第一個參數為插件方法,插件會接收從上游流下的文件,進行處理加工後,再往下流。

gulp.task('任務名稱', function () {
  return gulp.src('文件路徑')
    .pipe(...)
    .pipe(...)
    // 直到任務的最後一步
    .pipe(...);
});


gulp插件
gulp-gh-pages:使用gulp來把markdown生成html文檔並上傳到git pages上
https://github.com/shinnn/gulp-gh-pages

var gulp = require('gulp');

var ghPages = require('gulp-gh-pages');



gulp.task('deploy', function() {

 return gulp.src('./dist/**/*')

  .pipe(ghPages());

});


gulp-jade插件:將jade編譯成html文件
gulp-less插件:將less編譯成css文件

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

var path = require('path');

 

gulp.task('less', function () {

 return gulp.src('./less/**/*.less')

  .pipe(less({

   paths: [ path.join(__dirname, 'less', 'includes') ]

  }))

  .pipe(gulp.dest('./public/css'));

});
gulp-live-server 插件:方便的,輕量級的服務器

var gulp = require('gulp');

 var gls = require('gulp-live-server');

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

 //1. serve with default settings

 var server = gls.static(); //equals to gls.static('public', 3000);

 server.start();



 //2. serve at custom port

 var server = gls.static('dist', 8888);

 server.start();



 //3. serve multi folders

 var server = gls.static(['dist', '.tmp']);

 server.start();



 //use gulp.watch to trigger server actions(notify, start or stop)

 gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) {

  server.notify.apply(server, [file]);

 });

});

gulp-livereload,可以實時保存刷新,那樣就不用按F5和切換界面了
gulp-load-plugins:在你的package.json文件中自動加載任意的gulp插件

$ npm install --save-dev gulp-load-plugins

例如一個給定的package.json文件如下:

{

  "dependencies": {

    "gulp-jshint": "*",

    "gulp-concat": "*"

  }

}

在gulpfile.js中添加如下代碼:

var gulp = require('gulp');

var gulpLoadPlugins = require('gulp-load-plugins');

var plugins = gulpLoadPlugins();
plugins.jshint = require('gulp-jshint');

plugins.concat = require('gulp-concat');

gulp-babel:gulp 的babel插件,

$ npm install --save-dev gulp-babel babel-preset-es2015

使用方法:

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () => {
  return gulp.src('src/app.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('dist'));
});

官方github: https://github.com/gulpjs/gulp

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved