Введение в Gulp:
Gulp-это инструмент для строительного кодекса в фронтальной разработке и мощный инструмент для проектов автоматизации. Он может не только оптимизировать ресурсы веб -сайта, но и многие повторяющиеся задачи могут быть автоматически выполнены с правильными инструментами в процессе разработки. С ней мы можем не только счастливо писать код, но и значительно повысить эффективность нашей работы.
Gulp - это автоматический бегун задачи на основе Nodejs. Он может автоматически завершить тестирование, проверку, слияние, сжатие, форматирование, автоматическое обновление браузера, генерацию файлов развертывания, таких как JavaScript/Coffee/Sass/Less/HTML/Image/CSS, и прослушивайте повторение указанных шагов после изменения файла. С точки зрения реализации, она позаимствовала идею трубы операционной системы UNIX. Вывод предыдущего уровня непосредственно стал входом следующего уровня, что делает операцию очень простой. Благодаря этой статье мы узнаем, как использовать Gulp, чтобы изменить процесс разработки, делая разработку быстрее и эффективнее.
Gulp очень похож на Grunt, но по сравнению с частыми операциями Grunt, потоковые операции Gulp могут выполнять строительные работы быстрее и удобнее.
Когда я изучал Gulp сегодня, я использовал glp-uglify для сжатия модуля JS. Я столкнулся с проблемой - при использовании Gulp.Watch для прослушивания изменений в файлах JS я столкнулся с повторяющимися проблемами сжатия.
Структура каталога выглядит следующим образом:
Код Gulpfile.js выглядит следующим образом:
var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var rename = require ('gulp-rename'); gulp.task ('uglify', function () {gulp.src ('./ src/js/*. js'). Gulp.watch ('./ src/js/*. js', ['uglify']); watcher.on ('изменение', function (event) {console.log ('file' + event.path + 'был' + event.type + ', используемые задачи ...');});После выполнения команды uglify uglify:
Соответствующий *.min.js также генерируется:
Но когда я открываю файл Kong.js и сохраняю его снова, возникает следующая ситуация:
Сохраните один раз, а затем сжатие снова. Будет много сжатых файлов JS, таких как *.min.min ... JS, и только первое значение Kong.min.js изменится в соответствии с Kong.js. Позже я проверил следующий документ, и кто-то написал о том, что glp-uglify и обнаружил, что его можно использовать! Чтобы отфильтровать min.js, предотвратите его сжатие, измените код:
var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var rename = require ('gulp-rename'); gulp.task ('uglify', function () {Gulp.src (['./ src/js/*. js', '! ./ src/js/*. min.js']) Gulp.watch ('./ src/js/*. js', ['uglify']); watcher.on ('изменение', function (event) {console.log ('file' + event.path + 'был' + event.type + ', используемые задачи ...');});Выше приведено введение редактора в Gulp-Eglify и Gulp.Watch () при использовании в сочетании с Gulp.Watch (). Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!