node.js gulp 自動化構建工具

deliangyang發表於2018-07-06
Node.js

node.js gulp 自動化構建工具

官方網址

  • 網址 https://www.gulpjs.com.cn/
  • doc https://www.gulpjs.com.cn/docs/
  • API https://www.gulpjs.com.cn/docs/api/

場景

後臺一大堆的html和樣式style沒有構建的工具，所以每次都是不斷地copy程式碼，或者填程式碼，而且使用原生的css， 總之檔案中包含了大量的js、html、css，沒有模組化，結構化。

之前有了解過gulp，於是試了一下gulp，簡單的寫了一個 指令碼，支援less 轉 css，同時支援ssh sftp上傳到遠端伺服器上面

安裝

npm install --save-dev gulp
複製程式碼

package.json

或者copy package.json中devDependencies相關gulp的內容，再執行

npm install
複製程式碼
{
  "name": "api",
  "description": "party api",
  "scripts": {
    "watch": "./node_modules/.bin/gulp watch",
    "admin-fe": "./node_modules/.bin/gulp -f bin/frontend/gulpfile.js watch"
  },
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-less": "^3.5.0",
    "gulp-ssh": "^0.7.0",
    "gulp-sync": "^0.1.4",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^5.0.0"
  }
}
複製程式碼

程式碼


var gulp = require('gulp'),
    watch = require('gulp-watch'),
    less = require('gulp-less'),
    ssh = require('gulp-ssh'),
    fs = require('fs')

var config = {
    host: 'www.ydl.com',
    port: '22',
    username: 'root',
    privateKey: fs.readFileSync('C:\\Users\\Administrator\\.ssh\\id_rsa')
}

var gulpSSH = new ssh({
    ignoreErrors: false,
    sshConfig: config
})

gulp.task('watch', function() {
    return watch('../../public/admin/template/css/*.less', function() {
        gulp.src('../../public/admin/template/css/*.less')
            .pipe(less())
            .pipe(gulp.dest('../../public/admin/template/css'))
            .pipe(gulpSSH.dest('/var/www/api-site/public/admin/template/css'))
    })
});
複製程式碼

程式碼執行

我的gulpfile.js的目錄不是主目錄下，bin/frontend/gulpfile.js

npm run admin-fe
複製程式碼

或者

  • windows
./node_modules/.bin/gulp -f bin/frontend/gulpfile.js watch
複製程式碼
  • *unix/mac
gulp -f bin/frontend/gulpfile.js watch
複製程式碼

原文地址

www.sourcedev.cc/article/111

相關文章