• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

6thSence/Gulp-

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

6thSence/Gulp-

开源软件地址(OpenSource Url):

https://github.com/6thSence/Gulp-

开源编程语言(OpenSource Language):

JavaScript 85.4%

开源软件介绍(OpenSource Introduction):

Little Project Builder on Gulp

![wow](https://github.com/6thSence/assets-for-any-occasion/raw/master/200 (15).gif)

gulpfile.js

 var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename');
var compass = require('gulp-compass');
var clean = require('gulp-clean');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var wiredep = require('gulp-wiredep');
var useref = require('gulp-useref');
var browserSync = require('browser-sync').create();

// Задача с названием 'default' запускается автоматически по команде 'gulp' в консоле.
// Эта конструкция работает синхронно, сначала выполняется задача 'clean' и только после ее завершнения запускается 'dev'.
gulp.task('default', ['clean'], function() {
    gulp.run('dev');
});
// Аналогично с предыдушей задачей.
// Выполняет задача 'clean' и после ее завершения запускается 'build'.
gulp.task('production', ['clean'], function() {
    gulp.run('build');
});
// Задача 'dev' представляется собой сборку в режиме разработки.
// Запускает build - сборку, watcher - слежку за файлами и browser-sync.
gulp.task('dev', ['build', 'watch', 'browser-sync']);
// Задача 'build' представляет собой сборку в режиме продакшен.
// Собирает проект.
gulp.task('build', ['html', 'styles', 'scripts', 'assets']);
// Задача 'watch' следит за всеми нашими файлами в проекте и при изменении тех или иных перезапустает соответсвующую задачу.
gulp.task('watch', function() {
    gulp.watch('src/styles/**/*.scss', ['styles']); //стили
    gulp.watch('src/js/**/*.js', ['scripts']); //скрипты
    gulp.watch(['./bower.json', 'src/index.html'], ['html']); // html
    gulp.watch('./src/assets/**/*.*', ['assets']); //наши локальные файлы(картинки, шрифты)
    gulp.watch('src/**/*.{js,css}').on('change', browserSync.reload); //Перезапуск browserSynс
});
// Задача 'styles' выполняет сборку наших стилей.\
gulp.task('styles', function() {
    return gulp.src('src/styles/{main,about}.scss')
        .pipe(plumber({ // plumber - плагин для отловли ошибок.
            errorHandler: notify.onError(function(err) { // nofity - представление ошибок в удобном для вас виде.
                return {
                    title: 'Styles',
                    message: err.message
                }
            })
        }))
        .pipe(sourcemaps.init()) //История изменения стилей, которая помогает нам при отладке в devTools.
        .pipe(sass()) //Компиляция sass.
        .pipe(autoprefixer({ //Добавление autoprefixer.
            browsers: ['last 2 versions']
        }))
        .pipe(concat('styles.css')) //Соедение всех файлом стилей в один и задание ему названия 'styles.css'.
        .pipe(cssnano()) //Минификация стилей
        .pipe(sourcemaps.write())
        .pipe(rename('build.css')) //Переименование
        .pipe(gulp.dest('build/styles'));
});
//Задача для удаление папки build.
gulp.task('clean', function() {
    return gulp.src('build/')
        .pipe(clean());
})

gulp.task('html', function() {
    gulp.src('src/index.html')
        .pipe(wiredep({ //Добавление ссылок на плагины bower.
            directory: 'bower_components/'
        }))
        .pipe(gulp.dest('build/'))
        .on('end', function() { //запуск задачу 'useref' по завершению задачи 'html'.
            gulp.run('useref');
        });
});

gulp.task('useref', function() {
    gulp.src('build/index.html')
        .pipe(useref()) //Выполняет объединение файлов в один по указанным в разметке html комментариев.
        .pipe(gulp.dest('build/'));
});

gulp.task('scripts', function() {
    gulp.src('src/js/*.js')
        .pipe(uglify()) //Минификация скриптов.
        .pipe(gulp.dest('build/js'))
        .on('end', function() { //запуск задачу 'useref' по завершению задачи 'html'.
            gulp.run('html');
        });
});
//Задача для запуска сервера.
gulp.task('browser-sync', function() {
    return browserSync.init({
        server: {
            baseDir: './build/'
        }
    });
});
//Перемешение наших локальных файлов в папку build
gulp.task('assets', function() {
    return gulp.src('./src/assets/**/*.*')
        .pipe(gulp.dest('./build/assets'));
});



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
MeCKodo/gulpfile: 自己项目中的gulp配置发布时间:2022-06-21
下一篇:
ahmadajmi/underscore-wordpress-with-gulp发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap