gulpの構成使用

4740 ワード

自動構築ツール、利点
-     
          ,       
-     
      ,    IO
-     
         
-     
  • 取付
  • //     
    npm install -g gulp
    //           
    npm install gulp --save-dev
    
  • 実行
  • //       
    gulp  
    //       default task,       
    gulp
    
  • パラメータタグ
  • -v/--version:    gulp   
    --require :     require    
    --gulpfile :      gulpfile  
    --cwd :     cwd,  gulpfile     
    -T/--tasks:    
    
  • API
  • gulp.src(globs[, options])
    gulp.dest(path[, options])
    gulp.task(name[, deps], fn)
    gulp.watch(glob[, opts], tasks)
    gulp.watch(glob[, opts, cb])
    
  • gulpの簡単な構成
  • // gulpfile.js
    'use strict';
    var gulp = require('gulp');
    var less = require('gulp-less');
    var minifycss = require('gulp-minify-css');
    var rename = require("gulp-rename");
    var browserSync = require('browser-sync');
    var reload = browserSync.reload;
    var gutil = require('gulp-util');
    // load plugins
    var $ = require('gulp-load-plugins')();
    var hash = require('gulp-hash');
    var inject = require('gulp-inject');
    // handle *.less
    gulp.task('styles', function() {
      return gulp.src(['less/index.less'])
      .pipe(less())
      .pipe($.autoprefixer('last 1 version'))
      .pipe(minifycss())
      .pipe(gulp.dest('css'))
      .pipe(reload({stream: true}))
      .pipe($.size())
    });
    // handle *.js
    gulp.task('scripts', function() {
      return gulp.src('js/index.js')
        .pipe($.jshint())
        .pipe($.jshint.reporter(require('jshint-stylish')))
        .pipe(gulp.dest('js'))
        .pipe($.size());
    });
    // handle html, depend on styles and scripts
    gulp.task('html', ['scripts', 'styles'], function() {
      var jsFilter = $.filter('**/*.js', {restore: true}),
        cssFilter = $.filter('**/*.css', {restore: true});
    //       :gulp.src(['index.html', 'xx/**/*.html])
      return gulp.src('index.html')
        .pipe($.useref())
        .pipe(jsFilter)
        .pipe(hash({hashLength: 12}))
        .pipe($.uglify())
        .pipe(jsFilter.restore)
        .pipe(cssFilter)
        .pipe(hash({hashLength: 12}))
        .pipe($.csso())
        .pipe(cssFilter.restore)
        .pipe($.useref())
        .pipe(gulp.dest('dist'))
        .pipe($.size());
    });
    // handle images
    gulp.task('images', function() {
      return gulp.src('images/*')
        .pipe(gulp.dest('dist/images'))
        .pipe(reload({stream: true, once: true}))
        .pipe($.size());
    });
    // clean
    gulp.task('clean', function() {
      return gulp.src(['dist'], {read: false}).pipe($.clean());
    });
    // inject
    gulp.task('inject', ['html'], function() {
      var target = gulp.src('dist/*.html'),
        sources = gulp.src([ 'dist/js/vendor-*.js', 'dist/js/index-*.js','dist/css/index-*.css'], {read: false});
      return target.pipe(inject(sources, {relative: true}))
        .pipe(gulp.dest('dist'));
    });
    // build
    gulp.task('build', ['clean'], function() {
      gulp.start(['inject', 'images']);
    });
    // dev
    gulp.task('dev', ['watch']);
    // default
    gulp.task('default', ['clean'], function() {
      gulp.start('build');
    });
    // browserSync
    gulp.task('serve', ['styles'], function () {
        browserSync.init({
            port: 3200,
            server: {
                baseDir: ''
            }
        });
    });
    // watch
    gulp.task('watch', ['serve'], function () {
        // watch for changes
        //       :gulp.src(['index.html', 'xx/**/*.html])
        gulp.watch(['index.html'], reload);
    
        gulp.watch('less/**/*.less', ['styles']);
        gulp.watch('js/**/*.js', ['scripts']);
        gulp.watch('img/**/*', ['images']);
    });
    // index.html
    
    
      
        
        
        <!-- inject:css -->
        <!-- build:css css/index.css -->
        <link rel="stylesheet" href="css/index.css"/>
        <!-- endbuild -->
        <!-- endinject -->
      
      
        
      
      <!-- inject:js -->
      <!-- build:js js/vendor.js -->
      <script src="vendor/lib.js"/>
      <!-- endbuild -->
      <!-- build:js js/index.js -->
      <script src="js/index.js"/>
      <!-- endbuild -->
      <!-- endinject -->
    
    //       :        ,        
    </code></pre> 
    </article>
                                </div>
                            </div>