(转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具
https://segmentfault.com/a/1190000006738327
初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了。考虑到实际项目应用时,会有很多文件需要修改调整并压缩处理,这时候我们就会用到我们的《前端自动化神器 (Gulp)》,鉴于 gulp 的内容比较多,为了不打乱 Metronic 系列,就单独列了一篇《初探前端自动化神器 (Gulp)》。本文不对 gulp 进行详细阐述,只保留和 Metronic 相关部分。
Gulp is a toolkit that will help you automate painful or time-consuming tasks in your development workflow. To get started first install Node.js as gulp require npm to run. It can be downloaded at http://nodejs.org/download/. We can now install Gulp using npm. To install Gulp just follow below steps:
Gulp 是一个在你开发流程中帮助你自动化一些费时费力的苦差事的工具箱。
部署 gulp
打开终端并进入到 Metronic 的 theme 根目录。请查看该目录下 gulpfile.js
文件是否存在。
若存在,
运行下面命令
// 安装 gulp 附属
sudo npm install// 全局安装 gulp,这种模式安装后,gulp 可以应用到所有项目
sudo npm install gulp -g
查看 gulpfile.js
'use strict';// sass compile
var gulp = require('gulp'); var sass = require('gulp-sass'); var prettify = require('gulp-prettify'); var minifyCss = require("gulp-minify-css"); var rename = require("gulp-rename"); var uglify = require("gulp-uglify"); var rtlcss = require("gulp-rtlcss"); var connect = require('gulp-connect'); //*** Localhost server tast gulp.task('localhost', function() { connect.server(); }); gulp.task('localhost-live', function() { connect.server({ livereload: true }); }); //*** SASS compiler task gulp.task('sass', function () { // bootstrap compilation gulp.src('./sass/bootstrap.scss').pipe(sass()).pipe(gulp.dest('./assets/global/plugins/bootstrap/css/')); // select2 compilation using bootstrap variables gulp.src('./assets/global/plugins/select2/sass/select2-bootstrap.min.scss').pipe(sass({outputStyle: 'compressed'})).pipe(gulp.dest('./assets/global/plugins/select2/css/')); // global theme stylesheet compilation gulp.src('./sass/global/*.scss').pipe(sass()).pipe(gulp.dest('./assets/global/css')); gulp.src('./sass/apps/*.scss').pipe(sass()).pipe(gulp.dest('./assets/apps/css')); gulp.src('./sass/pages/*.scss').pipe(sass()).pipe(gulp.dest('./assets/pages/css')); // theme layouts compilation gulp.src('./sass/layouts/layout/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout/css')); gulp.src('./sass/layouts/layout/themes/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout/css/themes')); gulp.src('./sass/layouts/layout2/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout2/css')); gulp.src('./sass/layouts/layout2/themes/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout2/css/themes')); gulp.src('./sass/layouts/layout3/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout3/css')); gulp.src('./sass/layouts/layout3/themes/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout3/css/themes')); gulp.src('./sass/layouts/layout4/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout4/css')); gulp.src('./sass/layouts/layout4/themes/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout4/css/themes')); gulp.src('./sass/layouts/layout5/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout5/css')); gulp.src('./sass/layouts/layout6/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout6/css')); gulp.src('./sass/layouts/layout7/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout7/css')); }); //*** SASS watch(realtime) compiler task gulp.task('sass:watch', function () { gulp.watch('./sass/**/*.scss', ['sass']); }); //*** CSS & JS minify task gulp.task('minify', function () { // css minify gulp.src(['./assets/apps/css/*.css', '!./assets/apps/css/*.min.css']).pipe(minifyCss()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/apps/css/')); gulp.src(['./assets/global/css/*.css','!./assets/global/css/*.min.css']).pipe(minifyCss()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/global/css/')); gulp.src(['./assets/pages/css/*.css','!./assets/pages/css/*.min.css']).pipe(minifyCss()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/pages/css/')); gulp.src(['./assets/layouts/**/css/*.css','!./assets/layouts/**/css/*.min.css']).pipe(rename({suffix: '.min'})).pipe(minifyCss()).pipe(gulp.dest('./assets/layouts/')); gulp.src(['./assets/layouts/**/css/**/*.css','!./assets/layouts/**/css/**/*.min.css']).pipe(rename({suffix: '.min'})).pipe(minifyCss()).pipe(gulp.dest('./assets/layouts/')); gulp.src(['./assets/global/plugins/bootstrap/css/*.css','!./assets/global/plugins/bootstrap/css/*.min.css']).pipe(minifyCss()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/global/plugins/bootstrap/css/')); //js minify gulp.src(['./assets/apps/scripts/*.js','!./assets/apps/scripts/*.min.js']).pipe(uglify()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/apps/scripts/')); gulp.src(['./assets/global/scripts/*.js','!./assets/global/scripts/*.min.js']).pipe(uglify()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/global/scripts')); gulp.src(['./assets/pages/scripts/*.js','!./assets/pages/scripts/*.min.js']).pipe(uglify()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/pages/scripts')); gulp.src(['./assets/layouts/**/scripts/*.js','!./assets/layouts/**/scripts/*.min.js']).pipe(uglify()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/layouts/')); }); //*** RTL convertor task gulp.task('rtlcss', function () { gulp .src(['./assets/apps/css/*.css', '!./assets/apps/css/*-rtl.min.css', '!./assets/apps/css/*-rtl.css', '!./assets/apps/css/*.min.css']) .pipe(rtlcss()) .pipe(rename({suffix: '-rtl'})) .pipe(gulp.dest('./assets/apps/css')); gulp .src(['./assets/pages/css/*.css', '!./assets/pages/css/*-rtl.min.css', '!./assets/pages/css/*-rtl.css', '!./assets/pages/css/*.min.css']) .pipe(rtlcss()) .pipe(rename({suffix: '-rtl'})) .pipe(gulp.dest('./assets/pages/css')); gulp .src(['./assets/global/css/*.css', '!./assets/global/css/*-rtl.min.css', '!./assets/global/css/*-rtl.css', '!./assets/global/css/*.min.css']) .pipe(rtlcss()) .pipe(rename({suffix: '-rtl'})) .pipe(gulp.dest('./assets/global/css')); gulp .src(['./assets/layouts/**/css/*.css', '!./assets/layouts/**/css/*-rtl.css', '!./assets/layouts/**/css/*-rtl.min.css', '!./assets/layouts/**/css/*.min.css']) .pipe(rtlcss()) .pipe(rename({suffix: '-rtl'})) .pipe(gulp.dest('./assets/layouts')); gulp .src(['./assets/layouts/**/css/**/*.css', '!./assets/layouts/**/css/**/*-rtl.css', '!./assets/layouts/**/css/**/*-rtl.min.css', '!./assets/layouts/**/css/**/*.min.css']) .pipe(rtlcss()) .pipe(rename({suffix: '-rtl'})) .pipe(gulp.dest('./assets/layouts')); gulp .src(['./assets/global/plugins/bootstrap/css/*.css', '!./assets/global/plugins/bootstrap/css/*-rtl.css', '!./assets/global/plugins/bootstrap/css/*.min.css']) .pipe(rtlcss()) .pipe(rename({suffix: '-rtl'})) .pipe(gulp.dest('./assets/global/plugins/bootstrap/css')); }); //*** HTML formatter task gulp.task('prettify', function() { gulp.src('./**/*.html'). pipe(prettify({ indent_size: 4, indent_inner_html: true, unformatted: ['pre', 'code'] })). pipe(gulp.dest('./')); });
可以看出,Metronic 的 gulp
主要有 localhost
、 localhost-live
、 sass
、 sass:watch
、 minify
、 rtlcss
、 prettify
几个命令,分别实现不同的任务。
gulp 任务运用
首先我们在终端下用 gulp 命令测试,结果如下报错:
按照提示,在执行npm install
后需要执行 npm rebuild node-sass
重建 node-sass 来绑定当前环境。
执行 npm rebuild node-sass
后再执行 gulp
,显示如下:
说明 gulp 部署成功,只是默认任务还没有配置。我们先来看看gulpfile.js
列出的其他任务。
gulp localhost
任务和 gulp localhost-live
任务
在终端下执行:
gulp localhost
执行结果如下:
可见本地 web 服务已启动,当我们想要查看单独的主题演示列表的时候,我们可以通过在浏览器输入http://localhost:8080
进行访问。
gulp localhost-live
任务则可以运行实时更新支持的本地服务。
注意:一些基于 ajax 和数据库的演示无法通过 gulp localhost
服务正常展现. 要完全运行这些主题,需要一个支持 Apache 和 PHP 的环境.
SASS 编译
打开终端进入到 gulpfile.js
所在的 theme 目录。输入 gulp sass
命令执行手工构建任务.
输入 gulp sass:watch
运行 scss
实时监控 css 文件的编译.
相关监控代码:
//*** SASS compiler task
gulp.task('sass', function () {// bootstrap compilation gulp.src('./sass/bootstrap.scss').pipe(sass()).pipe(gulp.dest('./assets/global/plugins/bootstrap/css/')); // select2 compilation using bootstrap variables gulp.src('./assets/global/plugins/select2/sass/select2-bootstrap.min.scss').pipe(sass({outputStyle: 'compressed'})).pipe(gulp.dest('./assets/global/plugins/select2/css/')); // global theme stylesheet compilation gulp.src('./sass/global/*.scss').pipe(sass()).pipe(gulp.dest('./assets/global/css')); gulp.src('./sass/apps/*.scss').pipe(sass()).pipe(gulp.dest('./assets/apps/css')); gulp.src('./sass/pages/*.scss').pipe(sass()).pipe(gulp.dest('./assets/pages/css')); // theme layouts compilation gulp.src('./sass/layouts/layout/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout/css')); gulp.src('./sass/layouts/layout/themes/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout/css/themes')); gulp.src('./sass/layouts/layout2/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout2/css')); gulp.src('./sass/layouts/layout2/themes/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout2/css/themes')); gulp.src('./sass/layouts/layout3/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout3/css')); gulp.src('./sass/layouts/layout3/themes/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout3/css/themes')); gulp.src('./sass/layouts/layout4/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout4/css')); gulp.src('./sass/layouts/layout4/themes/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout4/css/themes')); gulp.src('./sass/layouts/layout5/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout5/css')); gulp.src('./sass/layouts/layout6/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout6/css')); gulp.src('./sass/layouts/layout7/*.scss').pipe(sass()).pipe(gulp.dest('./assets/layouts/layout7/css')); });
编译后的 css 文件会输出到 assets
目录.
gulpfile.js 中相关代码:
//*** SASS watch(realtime) compiler task
gulp.task('sass:watch', function () { // 监控到 `*.scss` 变化执行 `sass` 任务 gulp.watch('./sass/**/*.scss', ['sass']); });
RTL SASS 编译
注意,因为 RTL 的主题文件和默认的主题文件不在同一个目录,一个在 theme_rtl ,一个在 theme,所以,在 theme_rtl 目录下,需要对 gulp 进行重新部署。
部署命令如下:
sudo cnpm install
sudo cnpm install gulp
gulp sass
关于 cnpm
见《初探前端自动化神器 (Gulp)》。
然后进入gulpfile.js
位于的 theme_rtl
目录。
确定最新修改的 SCSS
已通过 gulp sass
或 gulp sass:watch
命令编译。
运行 gulp rtlcss
命令执行 css 文件的 RTL 版本修改任务。
编译后的 RTL css 会被输出到 assets 目录.
CSS 和 JS 文件的压缩
在命令行下进入 theme
目录。运行 gulp minify
执行 css 和 js 文件压缩任务.
压缩后的文件会输出到 assets
目录.
相关代码:
//*** CSS & JS minify task
gulp.task('minify', function () {// css minify gulp.src(['./assets/apps/css/*.css', '!./assets/apps/css/*.min.css']).pipe(minifyCss()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/apps/css/')); gulp.src(['./assets/global/css/*.css','!./assets/global/css/*.min.css']).pipe(minifyCss()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/global/css/')); gulp.src(['./assets/pages/css/*.css','!./assets/pages/css/*.min.css']).pipe(minifyCss()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/pages/css/')); gulp.src(['./assets/layouts/**/css/*.css','!./assets/layouts/**/css/*.min.css']).pipe(rename({suffix: '.min'})).pipe(minifyCss()).pipe(gulp.dest('./assets/layouts/')); gulp.src(['./assets/layouts/**/css/**/*.css','!./assets/layouts/**/css/**/*.min.css']).pipe(rename({suffix: '.min'})).pipe(minifyCss()).pipe(gulp.dest('./assets/layouts/')); gulp.src(['./assets/global/plugins/bootstrap/css/*.css','!./assets/global/plugins/bootstrap/css/*.min.css']).pipe(minifyCss()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/global/plugins/bootstrap/css/')); //js minify gulp.src(['./assets/apps/scripts/*.js','!./assets/apps/scripts/*.min.js']).pipe(uglify()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/apps/scripts/')); gulp.src(['./assets/global/scripts/*.js','!./assets/global/scripts/*.min.js']).pipe(uglify()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/global/scripts')); gulp.src(['./assets/pages/scripts/*.js','!./assets/pages/scripts/*.min.js']).pipe(uglify()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/pages/scripts')); gulp.src(['./assets/layouts/**/scripts/*.js','!./assets/layouts/**/scripts/*.min.js']).pipe(uglify()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./assets/layouts/')); });
HTML 格式化
该命令可以将 HTML 格式化缩进,对于 pre
和 code
两个标签内的内容不进行格式化。
代码如下:
//*** HTML formatter task
gulp.task('prettify', function() {gulp.src('./**/*.html'). pipe(prettify({ indent_size: 4, indent_inner_html: true, unformatted: ['pre', 'code'] })). pipe(gulp.dest('./')); });
转载于:https://www.cnblogs.com/telwanggs/p/7065414.html
(转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具相关推荐
- (转)Bootstrap 之 Metronic 模板的学习之路 - (2)源码分析之 head 部分
https://segmentfault.com/a/1190000006684122 下面,我们找个目录里面想对较小的文件来分析一下源码结构,我们可以看到,page_general_help.htm ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (1)总览
https://segmentfault.com/a/1190000006673582#articleHeader0 写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付 ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (6)自定义和扩展
https://segmentfault.com/a/1190000006815041 前面我们将 Metronic 的结构和源码大致浏览了一遍,Metronic 整个文件包有三百多兆,在实际项目中, ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (4)源码分析之脚本部分
https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (5)主题布局配置
https://segmentfault.com/a/1190000006736457 Theme Setup 主题配置 Metronic comes with 6 color themes,defa ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (3)源码分析之 body 部分
https://segmentfault.com/a/1190000006697252 body 的组成结构 body 部分包含了 HEADER.CONTAINER.FOOTER,其中 CONTAIN ...
- 小灰灰的APP学习之路(一)--开发工具安装
开发工具安装 在这之前说点废话,本系列是我自己的一点经验记录,防止遗忘,各位大佬勿喷,望指教.我是java基础,现在自己学习APP开发. 1.下载开发工具 在网上看一些初学者都是用Android St ...
- android 程序等待时间,Android开发学习之路--性能优化之常用工具
Android性能优化相关的开发工具有很多很多种,这里对如下六个工具做个简单的使用介绍,主要有Android开发者选项,分析具体耗时的Trace view,布局复杂度工具Hierarchy View, ...
- webpack前端构建工具学习总结(一)之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
最新文章
- 基于matlab_simulink汽车三自由度模型仿真
- mysql 性能 比较好_MySQL性能优化的最佳20+条经验
- The 2018 ACM-ICPC上海大都会赛 J Beautiful Numbers (数位DP)
- c++如何显示图片_Vue+laravel后端添加商品后图片如何显示?
- 【转载】linux环境下tcpdump源代码分析
- Hemberg-lab单细胞转录组数据分析(六)
- 两个CRunTime库排序算法调用,但是更值得注意的”指针“以及“三目”
- 一种可以解决python读取文件中文出乱码的方法
- php server host,PHP $ _SERVER ['HTTP_HOST']与$ _SERVER
- ignore的音标_单词ignore的音标_词典解释_翻译_相关例句_一直查
- Win8电脑插入耳机 无声音
- 设计思维Design Thinking
- Go语言fmt包的用法
- w3wp ash oracle,巧妙使用ASH信息
- 酱香科技不在YYDS了,市盈率50倍的白酒,要回调到25倍的市盈率?泡沫要破灭了
- 轻小说搜索及下载(基于8wenku)-python
- 【33】解读TPU:设计和拆解一块ASIC芯片
- Java高级工程师常见面试题
- 深圳首辆数字人民币主题观光巴士亮相
- 蜂蜜柚子茶最好的制作方法
热门文章
- linux内核数据结构实现--链表、队列和哈希
- 方便好用的在线CPU性能调优工具--perf的常见用法
- ModelCoder中的代数环问题
- matlab中tr什么意思,tr命令详解
- (85)Vivado 多周期路径约束情况
- (38)FPGA面试技能提升篇(C/C++、questasim仿真工具)
- MySQL 自定义函数设置执行时间_mysql自定义函数计算时间段内的工作日(支持跨年)...
- 遗传算法锦标赛选择java实现_java – 遗传算法锦标赛选择
- esp8266设置sta失败_ESP8266使用教程之初识
- STM32官方固件库