この記事では、フロントエンド開発のgulpの使用について整理し、ケースでは以下の機能を実現しました.

1.   less
2.   
3.   css 、js
3.   css 、js
4.   MD5
5.         
6.       .zip

クリックしてソースをダウンロード

まずは奉上

ドキュメントの初期ディレクトリ

client                #    
  ├─src               #     
  │  ├─css            # css
  │  │  ├─common.less
  │  │  ├─demo.css
  │  │  └─login.css 
  │  ├─js             # js
  │  │  ├─login.js
  │  │  └─register.js
  │  └─index.html     # html
  │     
  ├─.babelrc          # babel  
  ├─gulpfile.js       # gulp
  ├─package-lock.json
  └─package.json      #    

package.jsonの依存

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.5.0",
    "gulp-less": "^4.0.0",
    "gulp-notify": "^3.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^3.0.0",
    "gulp-zip": "^4.1.0"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rev": "^8.1.1",
    "gulp-rev-collector": "^1.3.1",
    "gulp-webserver": "^0.9.1",
    "run-sequence": "^2.2.1"
  }

.babelrcの構成

  "presets": [
    "es2015"
  ]

index.html挿入css/js

gulpfile.js

1. gulp

    const gulp = require('gulp')
    const babel = require('gulp-babel')
    const connect = require('gulp-connect')
    const webserver = require('gulp-webserver') //    
    const notify = require('gulp-notify') //     
    const less = require('gulp-less') // less
    const concat = require('gulp-concat') //     
    const rename = require('gulp-rename') //     
    const uglify = require('gulp-uglify') // js  
    const minify = require('gulp-minify-css') // css  
    const rev = require('gulp-rev') //      MD5  
    const revCollector = require('gulp-rev-collector') //     
    const runSequence = require('run-sequence') //       
    const zip = require('gulp-zip') //    .zip  

2.

    const path = {
      html: './src/*.html', // html      
      js: './src/js/*.js',  // js      
      less: './src/css/*.less',  // less      
      css: './src/css/*.css', // css      
      destJs:'./src/dest/js', // js       
      destCss:'./src/dest/css', // css       
      revJs:'./rev/js', // js rev-manifest.json   
      revCss: './rev/css' // css rev-manifest.json   
    }

3. less css

    gulp.task('less', function () {
      return gulp.src(path.less)
            .pipe(less())
            .pipe(gulp.dest('./src/css/less'))
            .pipe(notify({ message: 'less    ' }))
    })

4. css

    gulp.task('css', ['less'], function () { //   ['less']        'less'
      return gulp.src([path.css,'./src/css/less/*.css'])
            .pipe(concat('demo.css'))
            .pipe(gulp.dest(path.destCss))
            .pipe(notify({ message: 'css    ' }))
    })

5. js

    gulp.task('js', function() {
      return gulp.src(path.js)
            .pipe(babel()) //       es6         babel
            .pipe(concat('demo.js')) //   js      demo.js
            .pipe(gulp.dest(path.destJs)) //    dest/js   
            .pipe(notify({ message: 'js      ' }))
    })

6. css js ，

    // 1   webserver    Web     
    gulp.task('webserver', function () {  
      gulp.src('./src')  //      （./     ）
      //   gulp-webserver
      .pipe(webserver({
          port: 8000,  //  ，  8000
          livereload: true,  //   LiveReload
          open: true,  //             
          directoryListing: {
              enable: false, //        
              path: './src' //       
          },
          fallback: 'index.html', //        index.html  
          proxies: [] //   
      }))
    })
    // 2     html     refresh
    gulp.task('refresh', function () {
      gulp.src(path.html)
          .pipe(webserver.reload()) //     
    })
    
    // 3      css、js、html       refresh
    gulp.task('watch', function () {
      gulp.watch(path.less, ['css']) // less        css r  
      gulp.watch(path.css, ['css']) // css        css   
      gulp.watch(path.js, ['js']) // js        js   
      gulp.watch(path.destJs, ['refresh']) //    js  ，destJS  demo.js    ，    refresh
      gulp.watch(path.destCss, ['refresh']) //    css  ，destCss  demo.css    ，    refresh
      gulp.watch(path.html, ['refresh'])
    })

7. css

    gulp.task('revCss',['css'], function () {
      gulp.src(path.destCss + '/*.css')
      .pipe(minify())
      // .pipe(rename({suffix: '.min'}))
      .pipe(rev())  //     MD5  
      .pipe(gulp.dest('./build/dest/css'))
      .pipe(rev.manifest()) //     rev-manifest.json
      .pipe(gulp.dest(path.revCss))
    })

8. js

    gulp.task('revJs',['js'], function () {
      gulp.src(path.destJs + '/*.js')
      .pipe(uglify())//   js
      // .pipe(rename({ suffix: '.min' })) //     .min
      .pipe(rev())  //     MD5  
      .pipe(gulp.dest('./build/dest/js'))
      .pipe(rev.manifest()) //     rev-manifest.json
      .pipe(gulp.dest(path.revJs))
    })

9.

    gulp.task('revHtml', function () {
      return gulp.src(['./rev/**/*.json', path.html]) //        rev-manifest.json
          .pipe(revCollector()) //   path.html    
          .pipe(gulp.dest('./build'))
          .pipe(notify({ message: '    ' }))
    })

10.

    gulp.task('collect', ['revJs', 'revCss'], function () {
      gulp.run('revHtml')
    })

11. .zip

    gulp.task('zip', function () {
      return gulp.src('./build/**')
      .pipe(zip('gulp-demo' + '.zip'))
      .pipe(gulp.dest('./'))
    })

12.

    //    Gulp client
    gulp.task('dev', ['webserver', 'watch'])
    //    Gulp bulid
    gulp.task('build', ['collect'])
    //   
    gulp.task('build:zip', ['zip'])

では、 なケースはこれで わります. のコードのローカル に はありませんが、 の でエラーが した は、 えを します.クリックしてソースをダウンロード