Фронтенд решение для автоматизации на основе gulp

внешний интерфейс JavaScript CSS Gulp

предисловие

В последние годы фронтенд-технологии быстро развиваются, особенно популярность одностраничных приложений. Компонентизация, инжиниринг и автоматизация стали тенденцией фронтенд-разработки. webpack стал мейнстримом интерфейсной упаковки и сборки, но некоторые老古董Есть еще существующие проекты, и есть потребность в оптимизации, бывает, что старые проекты компании нуждаются в оптимизации, поэтому не будем говорить об использовании gulp на практике.

Эта статья должна установить узел (установить его самостоятельно) и понять, как начать работу с Gulp. Скачать скрипт Gulp:GitHub.com/Внебрачная связь/Итак…Добро пожаловать звезда.

упражняться

Создать каталог проекта

Сначала инициализируйте зависимости npm и основную информацию, используйте командуnpm initсохранить возврат каретки, сгенерироватьpackage.jsonФайл также можно загрузить непосредственно из каталога репозитория github выше.

Каталог вашего проекта связан с путем к задаче в вашем скрипте gulp.Я написал в своем скрипте соответствие всем каталогам и файлам. Я просто привожу пример: здесьjs/commonjs файлы в нем тоже будут обрабатываться. Если вы хотите обрабатывать файлы только в определенном каталоге, измените путь в задании.

demo/
├── css/
│   ├── index.css
├── js/
│   ├── common/
│   │       └─ common.js
│   ├── index.js
├── img/
│   ├── logo.png
└── index.html

Установите необходимые зависимости

Установите модули, необходимые для gulp, вот мой списокpackage.jsonсодержание документа

{
  "name": "demo",
  "version": "0.0.0",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cache": "^1.0.2",
    "gulp-clean-css": "^3.10.0",
    "gulp-htmlclean": "^2.7.15",
    "gulp-htmlmin": "^3.0.0",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^4.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^3.0.0",
    "gulp-path": "^3.0.3",
    "gulp-rev-append": "^0.1.8",
    "gulp-sequence": "^0.4.6",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^2.0.0",
    "uglify-js": "^3.3.9"
  }
}

писать gulp-скрипты

новыйgulpfile.jsфайл, и ввожу нужные модули, здесь я пишу путь равномерно вPATHSсередина. Для получения подробной информации о том, как написать путь, вы можете перейти к API официального сайта gulp:www.gulpjs.com.cn/docs/api/

gulp-minify-cssЭто официальное приглашение веб-сайта устарело, используйте его вместо этогоgulp-clean-css, тут оговорка только сказать всем, что эффект один и тот же, а пользователи последовательны.Для того, чтобы проект не имел проблем, лучше использовать самую свежую.

'use strict';
var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),//压缩css 已弃用
    cleancss = require('gulp-clean-css'),//压缩css
    imagemin = require('gulp-imagemin'),//压缩图片
    autoprefixer = require('gulp-autoprefixer'),//处理浏览器前缀
    uglify = require('gulp-uglify'),//压缩js
    sourcemaps = require('gulp-sourcemaps'),//生成 sourcemap
    gulpif = require('gulp-if'),//条件判断
    notify = require('gulp-notify'),//处理报错
    cache = require('gulp-cache'),//只压缩修改的图片
    htmlclean = require('gulp-htmlclean'),// 精简html
	htmlmin = require('gulp-htmlmin'),//压缩html
    rev = require('gulp-rev-append'),//增加版本号
    sequence = require('gulp-sequence'),//同步执行任务
    PATHS = {
    ROOT: './',
    DEST: './dist/',
    HTML: '**/*.{html,htm}',
    CSS: '**/*.css',
    IMG: '**/*.{png,jpg,gif,ico}',
    JS: '**/*.js'
}

Сжать css

тут надо исключитьnode_modulesПапки и каталоги после создания сборки/dist/и их подкаталоги, непосредственно!Далее следует каталог, который необходимо исключить из строки.

gulp.task('minify-css', function () {
    return gulp.src([PATHS.CSS,'!./dist/**', '!./node_modules/**'])
     .pipe(sourcemaps.init())
     .pipe(autoprefixer({
        browsers: ['last 10 versions', 'Firefox >= 20', 'Opera >= 36', 'ie >= 9', 'Android >= 4.0', ],
        cascade: true, //是否美化格式
        remove: false //是否删除不必要的前缀
    }))
     .pipe(cleancss({
        keepSpecialComments: '*' //保留所有特殊前缀
    }))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest(PATHS.DEST))
     .pipe(notify({ message: 'css minify complete' }));
});

Некоторые ссылочные css или js не нужно сжимать, напримерjQuery',Bootstrap, или внутреннюю общедоступную библиотеку компании .min.{css,js} и так далее.

Здесь мы используемgulp-if, чтобы исключить min.css

var conditionCss = function (f) {
    if (f.path.endsWith('.min.css')) {
        return false;
    }
    return true;
};

Дальнейшие модификации операций обработки CSS

.pipe(gulpif(conditionCss, cleancss({
    keepSpecialComments: '*' //保留所有特殊前缀
})))

Обработка сжатия js

Таким же образом исключите min.js, но также не забудьте исключить из обработки скрипт gulp.

gulp.task('minify-js', function () {
    return gulp.src([PATHS.JS, '!./dist/**', '!./node_modules/**', '!gulpfile.js'])
     .pipe(sourcemaps.init())
     .pipe(gulpif(conditionJs, uglify()))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest(PATHS.DEST))
     .pipe(notify({ message: 'js minify complete' }));
});

обработка сжатия изображения

gulp.task('minify-img', function () {
    return gulp.src([PATHS.IMG,'!./dist/**', '!./node_modules/**'])
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(PATHS.DEST));
});

Сжать HTML

gulp.task('minify-html', function () {
    return gulp.src(PATHS.DEST+PATHS.HTML)
        .pipe(htmlclean())
        .pipe(htmlmin({
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        minifyJS: true, //压缩页面JS
        minifyCSS: true, //压缩页面CSS
        minifyURLs: true
    }))
        .pipe(gulp.dest(PATHS.DEST));
});

Увеличить номер версии

gulp.task('rev', function () {
    return gulp.src([PATHS.HTML,'!./dist/**', '!./node_modules/**'])
        .pipe(rev())
        .pipe(gulp.dest(PATHS.DEST));
});

Выполнять задачи синхронно

Поскольку все задачи gulp выполняются асинхронно, иногда нам нужно выполнять задачи синхронно, например: сначала скомпилировать less, а затем сжать скомпилированный CSS, В настоящее время существует проблема с асинхронностью.

gulp.task('deploy', sequence(['minify-css', 'minify-js'], 'minify-img', 'rev', 'minify-html'));

Выполнить все задачи в gulp

Создайте файл с именем здесьdefaultзадание, выполнить вышеуказанноеdeployЗадача

gulp.task('default', ['deploy'], function (e) {
    console.log("[complete] Please continue to operate");
})

развертывать

введите в терминалеgulpилиgulp defaultВыполните сборку, и вы увидите наш сжатый код в выходном каталоге, который мы установили.

Пока почти написан простенький gulp скрипт, хотя воробей маленький и полноценный. Если у вас есть хорошие предложения, добро пожаловать поделиться.

Категории