Gulp 前端sass 实时编译重载
参考https://github.com/sindresorhus/gulp-ruby-sassCompiles 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')); });