Gulp 自动部署前端项目

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

       Gulp is a front-end automation build tool based on node.js. You can use gulp to

       a. Preprocess sass

       b. Code detection

       c. Chrome reloader

       d. Image compression optimization

       ...

1. Install gulp 4.0

(1) Install gulp globally:

$ npm install gulpjs/gulp#4.0 –g

(2) Install as a development dependency of the project:

$ npm install gulpjs/gulp#4.0 –save-dev

Advantage :

 Gulp 4.0 add two apis : gulp.series and gulp.parallel

2. Create a file called gulpfile.js in the project root directory:

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');var clean = require('gulp-clean');
var liveServer = require('gulp-live-server');
var srcFolder = 'src/osbar/';
var buildFolder = './build/';

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

    var replace = require('gulp-replace');
    var timestamp = new Date().getTime();
    return gulp.src(srcFolder + 'sass/styles.scss')
               .pipe(sourcemaps.init())
               .pipe(sass({ outputStyle : 'compressed' }).on('error', sass.logError))
               .pipe(autoprefixer())
               .pipe(sourcemaps.write('./maps'))
               .pipe(rename({ suffix: '.min' }))
               .pipe(replace('{%unixtimestamp%}', timestamp))
               .pipe(gulp.dest(buildFolder + 'css'));

});

3. Install gulp plugins

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var clean = require('gulp-clean');
var liveServer = require('gulp-live-server');

4. Run gulp :

$ gulp

     The default task named default will be run, where the task does nothing.

     To perform a specific task alone, use gulp <task> <othertask>.   

5. Useful API :

https://www.gulpjs.com.cn/docs/api/

gulp.src (globs[, options])

gulp.dest(path[, options])

gulp.task(name[, deps], fn)

gulp.watch(glob[, opts], tasks)