Gulp 前端sass 編譯瀏覽器重載

Gulp 前端sass 實時編譯重載

參考https://github.com/sindresorhus/gulp-ruby-sass

Compiles Sass with the Sass gem and pipes the results into a gulp stream.To compile Sass with libsass, use gulp-sass

var gulp=require('gulp');
var plumber = require('gulp-plumber');//讓錯誤恢復過來
var sourcemaps = require('gulp-sourcemaps');
var browserSync=require('browser-sync');
var reload=browserSync.reload;

//sass
var sass=require('gulp-ruby-sass');
var minifyCSS = require('gulp-minify-css');

// 壓縮圖片
var imagemin = require('gulp-imagemin');
var imageminOptipng = require('imagemin-optipng');
var imageminJpegtran = require('imagemin-jpegtran');

//壓縮js

var uglify = require('gulp-uglify');

 /*================文件鏈接======================================*/
 var concat = require('gulp-concat');


 /*================增長文件頭尾======================================*/
var header = require('gulp-header');
var pkg = require('./package.json');
var banner = ['/**',
  ' * <%= pkg.name %> - <%= pkg.description %>',
  ' * @version v<%= pkg.version %>',
  ' * @link <%= pkg.homepage %>',
  ' * @license <%= pkg.license %>',
  ' */',
  ''].join('\n');

/*信息提示*/
var notify = require('gulp-notify');

gulp.task('sass', function() {
  return sass('app/styles/scss/*.scss',{
    precision: 6,
    stopOnError:true,
    cacheLocation:'./app/styles/scss/sass_cache',
    sourcemap:true
  })
        .on("error",sass.logError)
        .pipe(plumber())
        .pipe(sourcemaps.write())
        .pipe(sourcemaps.write('maps',{
            includeContent:false,
            sourceRoot:'app/styles/scss'
        }))
        .pipe(minifyCSS())//壓縮css
        .pipe(gulp.dest('app/styles/css/'))
        .pipe(reload({ stream:true }));
});


gulp.task('server',['sass'],function(){
        browserSync({
            server:{
                baseDir:"app"
            }
        });
    });

 gulp.watch('app/styles/scss/*.scss', ['sass']);

/*壓縮js===================================================*/

 /*output 對象====================================================================
indent_start  : 0,     // start indentation on every line (only when `beautify`)
indent_level  : 4,     // indentation level (only when `beautify`)
quote_keys    : false, // quote all keys in object literals?
space_colon   : true,  // add a space after colon signs?
ascii_only    : false, // output ASCII-safe? (encodes Unicode characters as ASCII)
inline_script : false, // escape "</script"?
width         : 80,    // informative maximum line width (for beautified output)
max_line_len  : 32000, // maximum line length (for non-beautified output)
ie_proof      : true,  // output IE-safe code?
beautify      : false, // beautify output?
source_map    : null,  // output a source map
bracketize    : false, // use brackets every time?
comments      : false, // output comments?
semicolons    : true,  // use semicolons to separate statements? (otherwise, newlines)
*/


/*
 compress 對象==============================================================
sequences     : true,  // join consecutive statemets with the 「comma operator」
properties    : true,  // optimize property access: a["foo"] → a.foo
dead_code     : true,  // discard unreachable code
drop_debugger : true,  // discard 「debugger」 statements
unsafe        : false, // some unsafe optimizations (see below)
conditionals  : true,  // optimize if-s and conditional expressions
comparisons   : true,  // optimize comparisons
evaluate      : true,  // evaluate constant expressions
booleans      : true,  // optimize boolean expressions
loops         : true,  // optimize loops
unused        : true,  // drop unused variables/functions
hoist_funs    : true,  // hoist function declarations
hoist_vars    : false, // hoist variable declarations
if_return     : true,  // optimize if-s followed by return/continue
join_vars     : true,  // join var declarations
cascade       : true,  // try to cascade `right` into `left` in sequences
side_effects  : true,  // drop side-effect-free statements
warnings      : true,  // warn about potentially dangerous optimizations/code
global_defs   : {}     // global definitions


 =============================================================*/


gulp.task('jsMin', function() {
  return gulp.src('app/scripts/*.js',{
    mangle:false,//開啓混淆功能,
    output:{
        beautify:true,
        indent_level:4
    },
    compress:{

    },
    preserveComments:"all"
  })
    .pipe(plumber())
    .pipe(sourcemaps.write())
    .pipe(sourcemaps.write('maps',{
            includeContent:false
        }))
    .pipe(uglify())
    .pipe(gulp.dest('app/dist/js'));
});


 /*=============壓縮圖片=======================================*/

 gulp.task('imgMin', function() {
    return gulp.src('app/img/*')
        .pipe(imagemin({
            progressive: true,
            optimizationLevel:2,
            use: [imageminOptipng(),imageminJpegtran()]
        }))
        .pipe(gulp.dest('app/dist/img/'));
});


 /*================文件鏈接======================================*/
 
gulp.task('concat', function() {
  return gulp.src('app/scripts/*.js')
    .pipe(sourcemaps.init())
    .pipe(concat('all.js'),{
        newLine:';'
    })
    .pipe(sourcemaps.write())
    .pipe(sourcemaps.write('maps',{
            includeContent:false
        }))
    .pipe(gulp.dest('app/dist/js/'));
});

//增長頭尾
gulp.task("note",function(){

gulp.src("app/scripts/header.js")
    .pipe(header(banner,{pkg:pkg}))
    .pipe(notify("Add header!"))    //信息提示
    .pipe(gulp.dest('app/dist/js'));


});