基于gulp编写的一个简单实用的前端开发环境
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里打滚了两年的文艺小码农来说,也有自己的一些体会,今天就来分享一下自己基于Gulp编写的一个比较丑陋的前端开发环境,本人技术有限,有问题和意见请私下聊,勿喷:
首先安装Node.js,至于怎么安装的话 ,自行度娘。安装完成之后在命令行里面输入下面两个命令,如果输出了版本号的话(这个是我自己电脑上的版本),OK那么恭喜你安装成功了
1 node -v v6.2.0
2 npm -v v3.8.9
安装好了Node环境后,接下来你应该通过npm来安装Gulp了
1 npm install gulp -g
2 -g 代表的是全局安装,这样你到时候再任何目录下都可以跑gulp命令
但是你会发现在这个过程中可能会安装失败,为什么呢?,作为一个IT人员,在伟大的天朝 ,你懂得...,但是也不要灰心,人是高级动物,总归想到办法来解决的,这得感谢我们的马爸爸了,因为他的淘宝团队提供了一个镜像http://npm.taobao.org/,
在这里你可以通过改变镜像源来快速的安装自己所需要的东西了,这个时候一般是通过如下的命令安装了
1 cnpm install gulp
好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了,以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目
1 win+R键(windows平台上)、Mac和Linux操作系统上,自己度娘;
2 cd yourFilename ( 进入你的文件目录 )
3 npm init ( 初始化 )
完了你就直接一直按回车键,当看到你的目录里面生成一个以.json格式结尾的文件时,OK你的初始化就完成了接着你在根目录下新建一个名叫gulpfile.js的js文件,我也不知道为啥叫这个名字,反正就是这样规定的, 先前gulp安装是在全局环境下,
那么现在gulp的安装就是在你目录下面安装了
1 命令行运行 npm/cnpm install gulp --save-dev
2 --save-dev ( 你安装的包会出现在你开发(dev)的依赖(Dependencies)里),这样方便以后你的项目如果别人也用的话,那么那个人只要 npm/cnpm install 一下,OK所以的插件都安装了,你不需要拷贝给他
到了这一步,在编辑器中打开刚才新建的gulpfile.js文件,写入如下的代码进行测试
1 var gulp = require('gulp');
2 gulp.task('test',function(){
3
4 console.log('gulp 测试成功了!!'
5
6 })
7
8 在命令行运行 gulp test 回车 如果看到了控制台输出了那句话,OK,你的gulp的测试成功
好了到了上面这一步我们的准备工作都差不多了,我们接下来就来一个一个的安装插件,以及插件的基本使用,最后完成我们这个简单但实用的开发环境。关于Gulp的完整使用请点击这里http://www.gulpjs.com.cn/,这里不再讲解
对于一个项目来说的话,通常离不开模板编译、打包压缩,自动化部署等操作步骤,但是在这里我们重点讲解前面两项,好了回到命令行,开始撸代码,首先一个是html文件的编译依赖我们第一个使用的插件是 ``gulp-content-includer gulp-rev-append``,在html文件中导入一些公共的模块和为页面中引入的js。css、img加上版本号
1 命令行: npm/cnpm install gulp-content-includer --save-dev 在gulpfile.js 写如下的代码:
2 var gulp = require('gulp');// 引入 gulp
3 var contentIncluder = require('gulp-content-includer')
4 var rev = require('gulp-rev-append');
5 gulp.task('html', function() {
6 gulp.src(['src/module/**/*.html','!src/module/public/html/*.html'])
7 .pipe(contentIncluder({
8 includerReg:/<!\-\-include\s+"([^"]+)"\-\->/g
9 }))
10 .pipe(rev())
11 .pipe(gulp.dest('dest/'))
12 .pipe(browserSync.stream());
13 });
注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目录结构!!!!!!!!!!!!!(最后我会将源文件放到 github 上面,到时可以下载)
在根目录下新建一个src目录,再在src目录下面建一个module目录,在这个module目录里面放不同的模块包括公共的模块,比如我们这里有一个登录模块。那么我们新建一个login文件夹,里面放与登录相关的页面和静态文件,可能还会用到一些公共的,那么我们再建一个公共的文件夹叫public,这里面放公共的文件夹如图所示:
public目录下面我们新建了几个文件夹分别用来放公共的css、images、js、html,我们在login模块下新建一个index.html文件,分别引入头部和底部,如图所示:
在命令行运行: gulp html 完了后会在目录下多出一个文件,打开刚才编译过的html文件你会看到完整的编译成功 如图所示
那大家会问.pipe(rev())这个是干嘛的呢,这个是为js、css、img添加文件版本号的,如下图所示,
我们会发现引入的文件后面都多了一个版本号了,这个是为了防止浏览器产生缓存,只要文件改变,hash值会自动变,至此我们的第一个插件搞定
Html完了的话,应该是轮到css了吧,网上有很多都是关于怎么样用gulp去编译sass等文件,这里我要讲的是我们postcsss 点击去学习postcss吧http://www.w3cplus.com/blog/tags/516.html,去编写我们的css,然后编译,废话不多说,上代码
我们第二个,当然不止了,需要很多个配合使用 ``gulp-postcss(主要依赖模块) cssnex(使用CSS未来的语法) precss(编写Sass的函数) gulp-autoprefixer(处理浏览器私有前缀)gulp-sourcemaps(用于错误查找) gulp-minify-css(压缩css)
1 命令行: npm/cnpm install gulp-postcss cssnex precss gulp-autoprefixer gulp-minify-css gulp-sourcemaps --save-dev
2
3 在gulpfile.js 写如下的代码:
4
5 gulp.task('css', function () {
6
7 var processors = [
8
9 autoprefixer,
10
11 cssnext,
12
13 precss
14 ];
15 gulp.src(['src/module/**/css/*.css','src/module/public/css/*.css'])
16 .pipe(postcss(processors))
17 .pipe(autoprefixer({
18 browsers: ['last 2 versions', 'Android >= 4.0'],
19 cascade: true
20 }))
21 .pipe(gulp.dest('dest/'))
22 .pipe(browserSync.stream());
23 })
24
我们在login模块下面新建一个css文件如图所示,写上代码
在命令行运行: gulp css 在dest目录下打开刚才编译成功的样式文件 如图所示编译成功
上面只搞定了编译,那还有压缩,错误定位怎么办。我们再把刚才的代码稍微改一下
1 gulp.task('css', function () {
2 var processors = [
3 autoprefixer,
4 cssnext,
5 precss
6 ];
7 gulp.src(['src/module/**/css/*.css','src/module/public/css/*.css'])
8 .pipe(postcss(processors))
9 .pipe(autoprefixer({
10 browsers: ['last 2 versions', 'Android >= 4.0'],
11 cascade: true
12 }))
13 .pipe(minifycss())
14 .pipe(sourcemaps.init())
15 .pipe(sourcemaps.write())
16 .pipe(gulp.dest('dest/'))
17 .pipe(browserSync.stream());
18 })
19 我们再次编译你会发现生成的文件变了,变成下面这个样子了,要的就是这个效果
到此,css部分完成了,CSS部分完成了,该轮到JS了吧,js部分我主要依赖于这几个插件 `` gulp-babel(编译es6语法) gulp-uglify(压缩js)``
1 命令行: npm/cnpm install gulp-babel gulp-uglify --save-dev
2
3 在gulpfile.js 写如下的代码:
4
5 gulp.task('js', function () {
6 gulp.src(['src/module/**/js/*.js','!src/module/public/js/*.js'])
7 .pipe(babel({
8 presets: ['es2015']
9 }))
10 .pipe(uglify({
11 mangle: true, //fasle不混淆变量名 true为混淆
12 preserveComments: 'some' //不删除注释,还可以为 false(删除全部注释),some(保留@preserve @license @cc_on等注释) }))
13 .pipe(gulp.dest('dest/'))
14 .pipe(browserSync.stream())
15 .pipe(browserSync.stream());
16 });
我们在login模块下面新建一个js文件如图所示,写上如图代码
在命令行运行: gulp js 在dest目录下打开刚才编译成功的样式文件 如图所示
出现这样的结果就成功了,是不是觉得很简单啊
现在该轮到了图片了吧,图片也很简单,我们只用到了一个插件``gulp-imagemin( 图片压缩 )``
1 命令行: npm/cnpm install gulp-imagemin --save-dev
2
3 在gulpfile.js 写如下的代码:
4
5 gulp.task('images', function () {
6 gulp.src(['src/module/**/images/*.*','src/module/public/images/*.*'])
7 .pipe(imagemin({
8 optimizationLevel: 3,
9 interlaced: true,
10 progressive: true
11 }))
12 .pipe(gulp.dest('dest/'))
13 .pipe(browserSync.stream());
14 });
15
16
17 在login目录下放入一张图片,然后命令行运行 gulp images 然后对比压缩前后图片的大小,就知道有没有成功了
拷贝public下面不需要编译的一些库和插件:
在项目中我们通常会依赖一些插件和js库,通常这些文件都是被编译压缩过后的,不需要再次编译压缩,所以我们直接拷贝过去就可以
1 gulp.task('copyJs', function() {
2 gulp.src('src/module/public/js/**/*',{base: 'src/module/public/'})
3 .pipe(uglify({
4 mangle: true, //fasle不混淆变量名 true为混淆
5 preserveComments: 'some' //不删除注释,还可以为 false(删除全部注释),some(保留@preserve @license @cc_on等注释)
6 }))
7 .pipe(gulp.dest('dest/public'))
8 .pipe(browserSync.stream());
9 });
不知道大家有没有注意,每一个任务后面的加上了.pipe(browserSync.stream());这个是干嘛的呢,这就是接下来我们要讲到的,到这里是不是就完了呢?当然没有,我们写代码的时候不可能每次都去手动编译吧,那个太LOW了,我们要自动监听文件的编译压缩,对,就是这样
文件的自动编译压缩监听服务`browser-sync:http://www.browsersync.cn/
文件的译压缩监听服务我们依赖于``browser-sync(实时刷新)``这个插件通过这个插件我们可以在本地开启一个小的服务环境,每当文件改变的时候 ,就会自动处理,具体的使用请点击上面的链接,时间的原因就不在一一描述了
1 命令行: npm/cnpm install browser-sync --save-dev
2
3 在gulpfile.js 写如下的代码:
4
5 gulp.task('serve', ['css',"html","copyJs","js","images"], function() {
6 browserSync.init({
7 server: "./dest"
8 });
9 gulp.watch("src/module/**/css/*.scss", ['css']);
10 gulp.watch("src/module/**/*.html", ['copyHtml']);
11 gulp.watch("src/module/public/**/*", ['copyJs']);
12 gulp.watch("src/module/**/js/*.js", ['js']);
13 gulp.watch("src/module/**/images/*.*", ['images']);
14 gulp.watch("*.html").on('change', browserSync.reload);
15 });
到这里为止我们就差不多了,最后还有一个收尾工作,那就是用一个命令运行所有的任务,代码如下:
gulp.task('default', ['serve'])
前端工程话要做的事情有很多,不只是上面一点点,我作为一个刚入门的前端工程师花点时间来写这个东西,只是为了和大家共勉,后期我会继续完善代码,最后附上源代码https://github.com/huangzexia/gulp,更多问题请给我发邮件(huangzexiameishu@163.com),在github上下载下来后按照下面的命令
代码运行:
1、运行npm install
2、运行gulp
3、在浏览器中输入http://localhost:3000/login/index.html```
基于gulp编写的一个简单实用的前端开发环境的更多相关文章
- 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
- 基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境
基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境 Express 是比较经典的,也是最常用的 Nodejs Web框架. 一.Express 快速构建一个web应用 ...
- web 框架的本质及自定义web框架 模板渲染jinja2 mvc 和 mtv框架 Django框架的下载安装 基于Django实现的一个简单示例
Django基础一之web框架的本质 本节目录 一 web框架的本质及自定义web框架 二 模板渲染JinJa2 三 MVC和MTV框架 四 Django的下载安装 五 基于Django实现的一个简单 ...
- 基于websocket实现的一个简单的聊天室
本文是基于websocket写的一个简单的聊天室的例子,可以实现简单的群聊和私聊.是基于websocket的注解方式编写的.(有一个小的缺陷,如果用户名是中文,会乱码,不知如何处理,如有人知道,请告知 ...
- 《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感
编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...
- 研究实验1_搭建一个精简的C语言开发环境(包含部分经典的前言)
综合研究: 在这部分内容中,将启示我们如何进行独立研究和深度思考(一定要注意这一点,相应的调整自己的学习思想).同时使我们: (1)认识到汇编语言对于深入理解其他领域知识的 ...
- 通过搭建一个精简的C语言开发环境了解一个C程序的执行过程
一.如何搭建一个精简的C语言开发环境 准备:下载TC2.0,并解压,比如说“d:\tc2.0\tc”目录 1.在C盘建立一个目录minic c:\ md minic 2.从解压的目录中将以下文件拷贝到 ...
- Flux是一个Facebook团队的前端开发架构
Flux是一个Facebook团队的前端开发架构 Flux introduction 本文组成: React 官方文档翻译 相关实践心得. 内容上是Flux的介绍,例子将会在以后写出.一旦稍微多了解一 ...
- Node.js基于Express框架搭建一个简单的注册登录Web功能
这个小应用使用到了node.js bootstrap express 以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...
随机推荐
- zk伪集群部署
jdk 配置 # tar xf jdk-8u161-linux-x64.tar.gz -C /usr/local/ # vim /etc/profile.d/jdk.sh export JAVA_HO ...
- CAD交互绘制文字(网页版)
在CAD设计时,需要绘制文字,用户可以设置设置绘制文字的高度等属性. 主要用到函数说明: _DMxDrawX::DrawText 绘制一个单行文字.详细说明如下: 参数 说明 DOUBLE dPosX ...
- MessageBox的使用
一 函数原型及参数 function MessageBox(hWnd: HWND; Text, Caption: PChar; Type: Word): Integer; hWnd:对话框父窗口 ...
- DirectX9:高级着色语言(HLSL)
一.简介 高级着色语言(High)可以编写顶点着色器和像素着色器,取代固定功能流水线中的部分功能,在图形卡的GPU(Graphics Processing Unit,图形处理单元)中执行 注意:如果图 ...
- tmp note
cat file.txt > /dev/null 2>&1 丢弃错误和标准输出 systemctl isolate multi-user.target 切换回多用户命令行模式 sy ...
- Ztree 多选,显示勾选的路径
项目要求,需要向后台传递已经勾选的路径,如 l1-a, l1-l3-c,l1-l3-d;(如果是全选状态则只传递全选状态的路径,不传子节点). 具体可以参考jQ Ztree 的 v3.5 版本 Me ...
- bzoj2402 陶陶的难题II
这个是题目描述: 题解: 啊啊啊啊啊…… 垃圾分数规划. 垃圾树链剖分. 垃圾斜率优化. 垃圾darkbzoj. 这里才是题解: 我们设那个分数的值=k,那么有 $(yi-k*xi)+(qj-k*pj ...
- markdown pad激活
<iframe src="></iframe> ---恢复内容开始--- 注册码 Soar360@live.com GBPduHjWfJU1mZqcPM3BikjYK ...
- 项目:开发->测试->上线:流程规范
1) 项目分析 2) 项目经理分工协作 程序就具体流程: 1: 按项目名称: 建git, 数据库, 线上测试虚拟机 2: 按项目经理分配的大的模块. 自行划分工作阶段 a: 划分为小的模块 b: 预估 ...
- Django 动态建表
#!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Random_lee # -*- coding: utf-8 -*- from django ...