var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
cleanCSS = require('gulp-clean-css'),
rename = require('gulp-rename'),
browserSync = require('browser-sync').create(),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');
gulp.task('browser-sync', ['styles', 'scripts'], function() {
browserSync.init({
server: {
baseDir: "./app"
},
notify: false
});
});
gulp.task('styles', function () {
return gulp.src('sass/*.sass')
// output non-minified CSS file
.pipe(sass({
includePaths: require('node-bourbon').includePaths
}).on('error', sass.logError))
.pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
.pipe(gulp.dest('app/css'))
// output the minified version
.pipe(cleanCSS())
.pipe(rename({suffix: '.min', prefix : ''}))
.pipe(gulp.dest('app/css'))
.pipe(browserSync.stream());
});
gulp.task('scripts', function() {
return gulp.src([
'./app/libs/modernizr/modernizr.js',
'./app/libs/jquery/jquery-1.11.2.min.js',
'./app/libs/waypoints/waypoints.min.js',
'./app/libs/animate/animate-css.js',
'./app/libs/Magnific-Popup/jquery.magnific-popup.min.js',
'./app/libs/animateNumber/jquery.animateNumber.min.js',
'./app/libs/EqualHeights/equalheights.min.js',
'./app/libs/owl-carousel/owl.carousel.min.js',
'./app/libs/selectize/dist/js/standalone/selectize.min.js'
])
.pipe(concat('libs.js'))
.pipe(uglify()) //Minify libs.js
.pipe(gulp.dest('./app/js/'));
});
gulp.task('watch', function () {
gulp.watch('sass/*.sass', ['styles']);
gulp.watch('app/libs/**/*.js', ['scripts']);
gulp.watch('app/js/*.js').on("change", browserSync.reload);
gulp.watch('app/*.html').on('change', browserSync.reload);
});
gulp.task('default', ['browser-sync', 'watch']);
<script>
function loadCSS(hf) {
var ms=document.createElement("link");ms.rel="stylesheet";
ms.href=hf;document.getElementsByTagName("head")[0].appendChild(ms);
}
loadCSS("header.min.css"); //Header Styles (compress & paste to header after release)
loadCSS("main.min.css"); //User Styles + Media Queries
</script>.pipe(gulp.dest('app/css'))loadCSS("css/header.min.css");
loadCSS("css/main.min.css");.pipe(gulp.dest('app/')) <!-- Load Main CSS Compilled without JS -->
<noscript>
<link rel="stylesheet" href="main.min.css">
</noscript><script>
function loadCSS(hf) {
var ms=document.createElement("link");ms.rel="stylesheet";
ms.href=hf;document.getElementsByTagName("head")[0].appendChild(ms);
}
loadCSS("header.min.css"); //Header Styles (compress & paste to header after release)
loadCSS("main.min.css"); //User Styles + Media Queries
</script>
<!-- Load Scripts -->
<script>var scr = {"scripts":[
{"src" : "js/libs.js", "async" : false},
{"src" : "js/common.js", "async" : false}
]};!function(t,n,r){"use strict";var c=function(t){if("[object Array]"!==Object.prototype.toString.call(t))return!1;for(var r=0;r<t.length;r++){var c=n.createElement("script"),e=t[r];c.src=e.src,c.async=e.async,n.body.appendChild(c)}return!0};t.addEventListener?t.addEventListener("load",function(){c(r.scripts);},!1):t.attachEvent?t.attachEvent("onload",function(){c(r.scripts)}):t.onload=function(){c(r.scripts)}}(window,document,scr);
</script><!-- Load CSS -->
<script>
function loadCSS(hf) {
var ms=document.createElement("link");ms.rel="stylesheet";
ms.href=hf;document.getElementsByTagName("head")[0].appendChild(ms);
}
loadCSS("css/header.min.css"); //Header Styles (compress & paste to header after release)
loadCSS("css/main.min.css"); //User Styles + Media Queries
</script>
gulp.task('style:build', function () {
gulp.src(path.src.style) //Выберем наш main.scss
.pipe(sass()) //Скомпилируем
.pipe(prefixer()) //Добавим вендорные префиксы
.pipe(cssmin()) //Сожмем
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.build.css)) //И в build
.pipe(reload({stream: true}));
});
gulp.watch('app/css/*.css').on("change", browserSync.reload);
Простой
Средний