官方网址

• 网址 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

原文地址

http://www.sourcedev.cc/article/111