zoukankan      html  css  js  c++  java
  • gulp 插件

    原文链接:http://www.mamicode.com/info-detail-517085.html

    gulp是什么?

    http://gulpjs.com/ 相信你会明白的!

    与著名的构建工具grunt相比,有什么优势呢?

    1. 易于使用,代码优于配置
    2. 高效,不会产生过多的中间文件,减少I/O压力
    3. 易于学习,API非常少,你能在很短的事件内学会gulp

    那些常用的gulp插件

    No.1、run-sequence

    Linkshttps://www.npmjs.com/package/run-sequence

    作用:让gulp任务,可以相互独立,解除任务间的依赖,增强task复用

    推荐指数:★★★★★

    No.2、browser-sync

    Linkshttp://www.browsersync.io/

    作用:静态文件服务器,同时也支持浏览器自动刷新

    推荐指数:★★★★★

    No.3、del

    Links:https://www.npmjs.com/package/del

    作用:删除文件/文件夹

    推荐指数:★★★★★

    No.4、gulp-coffee

    Linkshttps://github.com/wearefractal/gulp-coffee

    作用:编译coffee代码为Js代码,使用coffeescript必备

    推荐指数:★★★★

    No.5、coffee-script

    Linkshttps://www.npmjs.com/package/coffee-script

    作用:gulpfile默认采用js后缀,如果要使用gulpfile.coffee来编写,那么需要此模块

    推荐指数:★★★

    No.6、gulp-nodemon

    Linkshttps://www.npmjs.com/package/gulp-nodemon

    作用:自动启动/重启你的node程序,开发node服务端程序必备

    推荐指数:★★★★★

    No.7、yargs

    Linkshttps://www.npmjs.com/package/yargs

    作用:用于获取启动参数,针对不同参数,切换任务执行过程时需要

    推荐指数:★★★

    No.8、gulp-util

    Linkshttps://www.npmjs.com/package/gulp-util

    作用:gulp常用的工具库

    推荐指数:★★★★★

    No.9、gulp-uglify

    Linkshttps://www.npmjs.com/package/gulp-uglify

    作用:通过UglifyJS来压缩JS文件

    推荐指数:★★★★

    No.9、gulp-concat

    Linkshttps://www.npmjs.com/package/gulp-concat

    作用:合并JS

    推荐指数:★★★★

    No.10、gulp-sourcemaps

    Linkshttps://www.npmjs.com/package/gulp-sourcemaps

    作用:处理JS时,生成SourceMap

    推荐指数:★★★★

    No.11、gulp-less

    Linkshttps://www.npmjs.com/package/gulp-less

    作用:将less预处理为css

    推荐指数:★★★★

    No.12、gulp-sass

    Linkshttps://www.npmjs.com/package/gulp-sass

    作用:将sass预处理为css

    推荐指数:★★★★

    No.13、gulp-autoprefixer

    Linkshttps://www.npmjs.com/package/gulp-autoprefixer

    作用:使用Autoprefixer来补全浏览器兼容的css。

    推荐指数:★★★★

    No.14、gulp-minify-css

    Linkshttps://www.npmjs.com/package/gulp-minify-css

    作用:压缩css。

    推荐指数:★★★★

    No.15、connect-history-api-fallback

    Linkshttps://www.npmjs.com/package/connect-history-api-fallback

    作用:开发angular应用必须,用于支持HTML5 history API.

    推荐指数:★★★

    一般的gulpfile文件(采用coffee编写)

    首先是,node应用程序:

    gulp = require(‘gulp‘)
    runSequence = require(‘run-sequence‘)
    
    coffee = require(‘gulp-coffee‘)
    gutil = require(‘gulp-util‘)
    del = require(‘del‘)
    nodemon = require(‘gulp-nodemon‘)
    argv = require(‘yargs‘).argv
    rename = require(‘gulp-rename‘)
    browserSync = require(‘browser-sync‘)
    reload = browserSync.reload
    
    # 处理参数
    isDebug = not (argv.r || false)
    
    # --入口任务-----------------------------------------------------------------
    gulp.task(‘default‘, (callback)->
      runSequence(
        [‘clean‘]
        [‘coffee-server‘, ‘copy-server‘, ‘copy-client‘, ‘coffee-client‘, ‘copy-views‘]
        ‘serve‘
        [‘browserSync‘, ‘watch‘]
        callback
      )
    )
    # --构建相关任务---------------------------------------
    gulp.task(‘clean‘, (callback)->
      del([‘./dist/‘], callback)
    )
    
    gulp.task(‘coffee-server‘, ->
      gulp.src([
        ‘./src/**/*.coffee‘
        ‘!./src/public/**/*.coffee‘
        ‘!./src/views/**‘
      ])
      .pipe(coffee({bare: true}).on(‘error‘, gutil.log))
      .pipe(gulp.dest(‘./dist/‘))
    )
    
    gulp.task(‘copy-server‘, ->
      gulp.src([
        ‘./src/config*/*.json‘
        ‘./src/database*/*.*‘
      ])
      .pipe(gulp.dest(‘./dist/‘))
    )
    
    gulp.task(‘copy-client‘, ->
      gulp.src([
        ‘./src/public*/**/*‘
        ‘!./src/public*/**/*.coffee‘
      ])
      .pipe(gulp.dest(‘./dist/‘))
    )
    
    gulp.task(‘coffee-client‘, ->
      gulp.src([
        ‘./src/public*/**/*.coffee‘
      ])
      .pipe(coffee({bare: true}).on(‘error‘, gutil.log))
      .pipe(gulp.dest(‘./dist/‘))
    )
    
    gulp.task(‘copy-views‘, ->
      gulp.src(‘./src/views/**/*.html‘)
      .pipe(rename({extname: ‘.vash‘}))
      .pipe(gulp.dest(‘./dist/views‘))
    )
    
    
    # --启动程序,打开浏览器任务----------------------------------------------------
    nodemon_instance = undefined
    gulp.task(‘serve‘, (callback)->
      called = false
      if not nodemon_instance
        nodemon_instance = nodemon({
          script: ‘./dist/index.js‘
          ext: ‘none‘
        })
        .on(‘restart‘, ->
          console.log(‘restart server......................‘)
        )
        .on(‘start‘, ->
          if not called
            called = true
            callback()
        )
      else
        nodemon_instance.emit("restart")
        callback()
      nodemon_instance
    )
    
    gulp.task(‘browserSync‘, ->
      browserSync({
        proxy: ‘localhost:3000‘
        port: 8888
      #files: [‘./src/public/**/*‘]
        open: true
        notify: true
        reloadDelay: 500 # 延迟刷新
      })
    )
    
    
    
    # --监视任务------------------------------------------------
    gulp.task(‘watch‘, ->
      gulp.watch([
        ‘./src/**/*.*‘
        ‘!./src/**/*.coffee‘
      ], [‘reload-client‘])
      gulp.watch(‘./src/**/*.coffee‘, [‘reload-server‘])
    )
    
    gulp.task(‘reload-client‘, (callback) ->
      runSequence(
        [‘copy-client‘, ‘coffee-client‘, ‘copy-views‘]
        ‘bs-reload‘
        callback
      )
    )
    
    gulp.task(‘reload-server‘, (callback) ->
      runSequence(
        [‘copy-server‘, ‘coffee-server‘]
        ‘serve‘
        ‘bs-reload‘
        callback
      )
    )
    
    gulp.task(‘bs-reload‘, ->
      browserSync.reload()
    )
    

    接下来是前端网站:

    gulp = require(‘gulp‘)
    gutil = require(‘gulp-util‘)
    coffee = require(‘gulp-coffee‘)
    del = require(‘del‘)
    runSequence = require(‘run-sequence‘)
    browserSync = require(‘browser-sync‘)
    historyApiFallback = require(‘connect-history-api-fallback‘)
    # 入口点
    gulp.task(‘default‘, ->
      runSequence(
        [‘clean‘]
        [‘copy‘]
        [‘serve‘]
      )
    )
    
    gulp.task(‘copy‘, ->
      gulp.src([
        ‘./src/**/*.*‘
        ‘!./src/**/*.coffee‘
        ‘!./src/**/*.less‘
      ])
      .pipe(gulp.dest(‘./dist‘))
    )
    
    gulp.task(‘clean‘, (callback)->
      del([‘./dist/‘], callback)
    )
    
    gulp.task(‘serve‘, ->
      browserSync({
        server: {
          baseDir: "./dist"
          middleware: [historyApiFallback]
        }
        port: 2222
      })
    )
    
    gulp.task(‘watch‘, ->
      # do something...
    )
    
  • 相关阅读:
    不可或缺 Windows Native (15)
    不可或缺 Windows Native (14)
    不可或缺 Windows Native (13)
    不可或缺 Windows Native (12)
    不可或缺 Windows Native (11)
    不可或缺 Windows Native (10)
    不可或缺 Windows Native (9)
    不可或缺 Windows Native (8)
    不可或缺 Windows Native (7)
    不可或缺 Windows Native (6)
  • 原文地址:https://www.cnblogs.com/wxiaona/p/5810811.html
Copyright © 2011-2022 走看看