Gulpフロントエンド最適化

使用方法:
ダウンロードjs , https://nodejs.org/en/、msi をインストール
次のコマンドはdosコマンドに属します.
Node-v,npm-v,ダウンロードに成功したかどうかを確認(バージョン番号が表示されます)npmを淘宝npm install cnpm-g--registry=にミラーします.https://registry.npm.taobao.org
次にnpmの代わりにcnpmを用いてを用いる.
理由はnpmが海外サーバであるためである.
gulpをグローバルcnpm install gulp-g にインストール
検査取付gulp-v ファイルプロジェクトディレクトリに切り替え、cnpm install gulp--save-dev プラグインのインストール:プラグインが多く、cnpm install gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
プロジェクトルートディレクトリにgulpfileを作成する.jsファイル

var gulp = require('gulp');
gulp.task('default', function() {
  console.log('hello world');
});

gulpを実行し、検査する

配列を使用して複数のファイルをマッチングし、正則と!を使用できます.
具体コード

//var gulp = require('gulp');
//
//gulp.task('default', function() {
//  console.log('hello world');
//});

//    gulp   
var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),        //  css
    //jshint = require('gulp-jshint'),            //js    
    uglify = require('gulp-uglify'),            //  JS
    imagemin = require('gulp-imagemin'),        //    
    rename = require('gulp-rename'),            //  js  
   // concat = require('gulp-concat'),        //         1     
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');
    
    
// Styles
gulp.task('styles', function() {
  return gulp.src('src/styles/**/**/**/**/**/**/**/**/**/*.css')
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/styles'))
        .pipe(notify({ message: 'Styles task complete' }));
});

// Scripts
gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/**/**/**/**/**/**/**/*.js')
    //.pipe(jshint('.jshintrc'))
   // .pipe(jshint.reporter('default'))
  //  .pipe(concat('main.js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

// Images
gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});

// Clean       ，          
gulp.task('clean', function(cb) {
    del(['dist/**/**/**/**/**/**/*'], cb)
});

// Default task        
gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});

// Watch      
gulp.task('watch', function() {
  // Watch .scss files
  gulp.watch('src/styles/**/**/**/**/**/**/**/**/**/**/*.css', ['styles']);
  // Watch .js files
  gulp.watch('src/scripts/**/**/**/**/**/**/**/**/**/**/**/*.js', ['scripts']);
  // Watch image files
  gulp.watch('src/images/**/**/**/**/**/**/**/**/**/**/*', ['images']);
  // Create LiveReload server
  livereload.listen();
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);

});