node和gulp实现前端工程自动化(附:gulp常用插件)
/**
* 1. LESS编译 压缩 合并
* 2. JS合并 压缩 混淆
* 3. img复制
* 4. html压缩
*/
// 在gulpfile中先载入gulp包,因为这个包提供了一些API
var gulp = require('gulp');
var less = require('gulp-less');
var cssnano = require('gulp-cssnano');
// 1. LESS编译 压缩 --合并没有必要,一般预处理CSS都可以导包
gulp.task('style', function() {
// 这里是在执行style任务时自动执行的
gulp.src(['src/styles/*.less', '!src/styles/_*.less'])
.pipe(less())
.pipe(cssnano())
.pipe(gulp.dest('dist/styles'))
.pipe(browserSync.reload({
stream: true
}));
});
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
// 2. JS合并 压缩混淆
gulp.task('script', function() {
gulp.src('src/scripts/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(browserSync.reload({
stream: true
}));
});
// 3. 图片复制
gulp.task('image', function() {
gulp.src('src/images/*.*')
.pipe(gulp.dest('dist/images'))
.pipe(browserSync.reload({
stream: true
}));
});
var htmlmin = require('gulp-htmlmin');
// 4. HTML
gulp.task('html', function() {
gulp.src('src/*.html')
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true
}))
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({
stream: true
}));
});
var browserSync = require('browser-sync');
gulp.task('serve', function() {
browserSync({
server: {
baseDir: ['dist']
},
}, function(err, bs) {
console.log(bs.options.getIn(["urls", "local"]));
});
gulp.watch('src/styles/*.less',['style']);
gulp.watch('src/scripts/*.js',['script']);
gulp.watch('src/images/*.*',['image']);
gulp.watch('src/*.html',['html']);
});
附录:
gulp常用插件:
gulp-less:编译less
gulp-concat:合并代码
gulp-uglify:压缩js文件
gulp-rename:重命名文件
gulp-cssnano:css压缩
gulp-htmlmin:压缩html
gulp-imagemin:压缩图像
brower-sync:用来代替创建服务器
gulp-connect:创建本地服务器
node和gulp实现前端工程自动化(附:gulp常用插件)的更多相关文章
- 使用Gulp实现前端构建自动化
使用Gulp实现前端构建自动化 安装 一.安装NodeJs Gulp的安装依赖于NodeJs的npm安装管理器 安装包下载地址 关于npm命令: 1. npm install <name> ...
- 【转】前端工程筹建NodeJs+gulp+bower
转自:http://www.myexception.cn/javascript/1781968.html npm nodejs 安装过程中会自动安装npm,nodejs安装程序会在环境变量中添加两个变 ...
- [转]gulp构建前端工程
摘要: Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript. ...
- 前端工程筹建NodeJs+gulp+bower
1.安装nodejs nodejs 官网下载安装文件 安装完成之后,在命令窗口执行,(显示nodejs版本) 和(显示npm版本)可以使用这两个命令查看是否安装成功: node -v npm -v 2 ...
- 前端工程搭建NodeJs+gulp+bower
需要node.npm的事先安装!! 1.nodejs安装程序会在环境变量中添加两个变量: 系统环境变量中:path 增加C:\Program Files\nodejs\ 因为在该目下存在node.ex ...
- require.context实现前端工程自动化
require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...
- 使用require.context实现前端工程自动化
require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...
- 前端构建工具之gulp_常用插件
gulp常用插件的使用 今天来看看一下gulp的常用插件的使用 就像gruntjs需要一个Gruntfile.js文件一样,gulp也需要一个文件作为它的主文件,在gulp中这个文件叫做gulpfil ...
- Web前端开发:Sublime Text 常用插件
在安装这些插件之前,确保你已经安装了Package Control. 安装Package Control方法: 通过菜单栏View->Show Console 或者快捷键Ctrl+` 打 ...
随机推荐
- oracle 12.1.0.2中对象锁对系统的较大影响
环境:oracle 12.1.0.2 rac ,4节点 一.概述 通常来说,如果是oltp应用,那么部署在rac上,是不错的注意. 但实现情况中,往往是混合类型,既有OLTP也有OLAP. 如果没有 ...
- 使用百度定位Api获取当前用户登录地址
最近在做一个商城项目,客户想把网站做成类似于美团的效果,切换地区时,内容也跟随变化.这就要首先解决根据用户id获得地址的问题,最终决定使用百度定位(不适用于搭建反向代理的项目) String url ...
- elasticsearch 5.x 系列之四(索引模板的使用,详细得不要不要的)
1,首先看一下下面这个索引模板 curl -XPUT "master:9200/_template/template_1?pretty" -H 'Content-Type: app ...
- Excel VBA表格自行开发计划
Excel VBA表格自行开发计划 要求功能 1. 批量删除 2. [X] 批量填充 3. [X] 批量重命名 4. [ ] 按颜色求和 5. [ ] 按底纹色选中单元格 6. [ ] 统计底纹颜色个 ...
- Make命令完全详解教程
Make命令完全详解教程 无论是在Linux还是在Unix环境中,make都是一个非常重要的编译命令.不管是自己进行项目开发还是安装应用软件,我们都经常要用到make或make install.利用m ...
- Kubernetes-创建集群(四)
Kubernetes可以运行在多种平台,从笔记本到云服务商的虚拟机,再到机架上的裸机服务器.要创建一个Kubernetes集群,根据不同的场景需要做的也不尽相同,可能是运行一条命令,也可能是配置自己定 ...
- R语言学习笔记(九):fivenum()与quantile()
fivenum() fivenum(x, na.rm = TRUE) x 为数值型向量,可以包含NA以及Inf,-Inf na.rm = TRUE 默认将NA和NaN去除,但是Inf还保留. five ...
- Python3.6中PyInstaller不能对文件进行打包问题
上篇文章<itchat和matplotlib的结合使用爬取微信信息>是用python爬取信息得到微信朋友的信息,并且用matplotlib统计信息进行画图,所以今天想将它打包成.exe可执 ...
- JSOI2018 R1 & 九省联考2018 滚粗记
在NOIP与PKUWC相继滚粗后,rp守恒定律似乎终于开始起作用了…… (尽管Day2依然滚粗?) Day1: 本着前40min不写代码的准则,先把三道题大致过了一遍,似乎都比较喜闻乐见? T1:对抗 ...
- c++ list_iterator demo
#include <iostream> #include <list> using namespace std; typedef list<int> Integer ...