gulp構建例子(ubuntu)

一、項目結構和生產以後的目錄

 

 

二、gulpfile.js

// 載入插件
var gulp = require('gulp'),   //本地安裝gulp所用到的地
    sass = require('gulp-sass'), // 處理sass
    less = require('gulp-less'), // 處理less
    autoprefixer = require('gulp-autoprefixer'),  //根據設置瀏覽器版本自動處理瀏覽器前綴
    minifycss = require('gulp-minify-css'), //壓縮css 減少文件大小，並給引用url添加版本號避免緩存
    rev = require('gulp-rev-append'), //給頁面引用url添加版本號，以清除頁面緩存
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'), ///壓縮javascript文件，減少文件大小
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    htmlmin = require('gulp-htmlmin'),
    runSequence = require('gulp-run-sequence');


// 樣式
gulp.task('scss', function() {
  return gulp.src('src/styles/sass/*.sass')
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles/sass'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles/sass'))
    .pipe(notify({ message: 'Styles task complete' }));
});

gulp.task('less', function() {
  return gulp.src('src/styles/less/*.less')
    .pipe(less({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles/less'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles/less'))
    .pipe(notify({ message: ' less Styles task complete' }));
});


gulp.task('css', function() {
  return gulp.src('src/styles/css/*.css')
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles/css'))
    .pipe(notify({ message: ' css Styles task complete' }));
});



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

// 圖片
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' }));
});

//html
gulp.task('html', function () {
    var options = {
        removeComments: true,//清除HTML註釋
        collapseWhitespace: true,//壓縮HTML
        collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//刪除全部空格做屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS
    };
    gulp.src('src/html/*.html')
        .pipe(htmlmin(options))
        .pipe(rev())
        .pipe(gulp.dest('dist/html'));
});




// 清理
gulp.task('clean', function() {
  return gulp.src(['dist/styles', 'dist/scripts', 'dist/images','dist/html'], {read: false})
    .pipe(clean());
});

// 預設任務
gulp.task('default', ['clean'], function() {
    gulp.start('scss','less','css', 'scripts', 'images','html');
});


gulp.task('prod', function(cb) {
    runSequence('clean',  ['images','less','scss','css','scripts'], 'html',cb);
});

// 看手
gulp.task('watch', function() {

  // 看守全部.scss檔
  gulp.watch('src/styles/**/*.scss', ['scss']);

 // 看守全部.less
  gulp.watch('src/styles/**/*.less', ['less']);

 // 看守全部.css
  gulp.watch('src/styles/**/*.css', ['css']);


  // 看守全部.js檔
  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // 看守全部圖片檔
  gulp.watch('src/images/**/*', ['images']);

 // 看守全部圖片檔
  gulp.watch('src/html/**/*.html', ['html']);

  // 創建即時重整伺服器 爲了讓這個功能有效，除了伺服器以外，還須要安裝並啓用LiveReload的瀏覽器外掛。或者你也能夠手動加上這個片斷程式碼。
  //var server = livereload();

  // 看守全部位在 dist/  目錄下的檔案，一旦有更動，便進行重整
  //gulp.watch(['dist/**']).on('change', function(file) {
  // server.changed(file.path);
  //});

});

三、執行gulp 以前先安裝上面涉及到的插件：

~ $ cnpm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache gulp-run-sequence gulp-less  notify-send --save-dev jshint gulp-jshint

四、執行：gulp 或者gulp prod (這個按順序執行任務)

五、若是出現：

gulp-notify: [Error in notifier] Error in plugin 'gulp-notify' not found: notify-send

錯誤

解決辦法：

sudo apt-get update sudo apt-get install libnotify-bin