使用gulp构建一个项目

原创 2016年06月01日 16:46:23

gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt。构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查、合并、重命名、压缩、格式化、浏览器自动刷新、部署文件等功能。

gulp是基于Nodejs的自动运行器,他借鉴了Unix操作系统的管道(pipe)思想,前一级的输出是后一级的输入。下面是具体流程:

1、安装nodejs

nodejs下载地址:https://nodejs.org/

nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功

常用的npm命令

npm init——初始化

npm install——安装插件

npm install plugname -g——全局安装

npm install plugname@2.3.0——安装具体某个版本的插件

npm update——更新插件

npm uninstall——卸载插件


常用dos命令

cd 进入某个目录

cd.. 返回上一级

dir 查看列表

cls 清除屏幕

del name 删除文件

md name 新建目录名

rd name 删除目录名

copy con name.txt 新建文件

del name.txt  删除文件


2、全局安装gulp

npm install gulp -g

3、创建本地项目

上面是准备工作,安装完全局gulp之后,cd到项目文件夹安装本地gulp,安装之前要先初始化

npm init




初始化的时候要求你输入一些值,不输的直接回车即可,点击y之后在根目录自动创建了一个package.json文件,这个文件用来存放即将安装的插件name和version,这个文件有什么用呢?当我们把项目拷贝给别人的时候不需要拷贝插件,只需要把项目文件、package.json和gulp.file.js拷贝过去就可以,接收人cd到项目文件目录直接输入npm install即可安装上我们拷贝前安装的各种插件。


4、设计项目目录索引结构

└── src/
    ├── less/    *.less 文件
    ├── sass/    *.scss *.sass 文件
    ├── css/     *.css  文件
    ├── js/      *.js 文件
    ├── fonts/   字体文件
    └── images/   图片
└── dist/

5、安装各种插件

npm install gulp gulp-imagemin gulp-minify-css gulp-uglify gulp-util gulp-watch-path stream-combiner2 --save-dev

--save-dev这个命令是将安装的插件信息写入package.json文件内的“devDependencies”属性内,插件全部安装完之后package.json的变化为:

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-imagemin": "^2.3.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^1.5.3",
    "gulp-util": "^3.0.7",
    "gulp-watch-path": "^0.1.0",
    "stream-combiner2": "^1.1.1"
  }


插件安装完毕之后会自动创建一个node_modules文件夹,所有插件的依赖都存在这里面。

gulp——本地gulp
gulp-imagemin——图片压缩
gulp-minify-css ——css压缩
gulp-uglify ——js压缩
gulp-util ——控制台代码着色
gulp-watch-path ——文件很多时编辑那个哪个压缩,不会全部压缩(获取改变的文件的src和dest路径)
stream-combiner2——有些 gulp 任务编译出错会终止 gulp.watch,使用 gulp-watch-path 配合stream-combiner2 可避免这种情况

6、gulp如何使用

控制台输入gulp的时候首先找寻gulpfile.js文件,在找寻default任务,所以我们应该手动新建一个名为gulpfile.js的js文件,将任务写在里面。具体文件目录为:


gulp一共五中方法:

gulp.task()——新建任务

gulp.src()——获取文件源地址

gulp.dest()——文件输出地址

gulp.run()——运行任务

gulp.watch()——监听文件修改


7、编写gulpfile.js文件

(1)引入插件变量

var gulp = require('gulp'),
	uglify = require('gulp-uglify'),
	minifycss = require('gulp-minify-css'),
	imgmin = require('gulp-imagemin'),
	gutil = require('gulp-util'),
	watchPath = require('gulp-watch-path'),
	combiner = require('stream-combiner2');

(2)新建代码着色与显示错误日志方法,这个方法用到了gulp-util和stream-combiner2插件

var handleError=function(err){
	console.log('\n');
	gutil.log('fileName: '+gutil.colors.red(err.fileName));
	gutil.log('lineNumber: '+gutil.colors.red(err.lineNumber));
	gutil.log('message: ' + err.message);
	gutil.log('plugin: ' + gutil.colors.yellow(err.plugin));
};

(3)新建js批量压缩任务

gulp.task('script',function(){//script时自定义的
//将文件的源路径和发布路径赋值给相应变量
    var srcJsPath='js/*.js';
    var destJsPath='dist/js/';
    var combined = combiner.obj([
            gulp.src(srcJsPath),//获取文件源地址
            uglify(),//执行压缩
            gulp.dest(destJsPath)//将压缩的文件发布到新路径
        ]);
    combined.on('error', handleError);//打印错误日志
});


这种写法需要css目录下有很多css文件,只要改变了一个点击保存的时候gulp会把所有css文件都会压缩一遍,为了提高性能我们可以利用gulp-watch-path插件只压缩/发布修改的文件

gulp.task('watchjs',function(){
	gulp.watch('js/*.js',function(event){
	var paths=watchPath(event,'js/','dist/js/');
        //打印修改类型和路径
        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);
        gutil.log('Dist: ' + paths.distPath);
		//获取错误信息,继续执行代码
		var combined = combiner.obj([
				gulp.src(paths.srcPath),
				uglify(),
				gulp.dest(paths.distDir)
			]);
		combined.on('error', handleError);
	});
});

(4)编写default任务和监听任务

新建批量任务还是监听修改任务根据项目中实际需要去写,等我们写好很多任务之后就需要写入default中,default写好之后只需要在dos窗口写入gulp就可以自动执行任务

gulp.task('default',function(){
	//默认执行的方法,引号内的内容对应上面task写的内容
	gulp.run('watchjs','css','images');
	//监控js
	gulp.watch('js/*.js',['watchjs']);
	//监控css
	gulp.watch('css/*.css',['css']);
	//监控img
	gulp.watch('images/*.*',['images']);
});

如果不想执行默认任务只执行js单文件压缩任务只需要输入 gulp watchjs即可。控制台输入为下图:



此时,gulp处于监听状态,如果要取消需要按ctrl+c 回车即可。


补充:

将本文件夹下的文件发布到其他盘

//注意src的参数
gulp.task('distCopyEclipse',function(){
	return gulp.src('src/cssEclispe/*',{nodir:true})
	.pipe(cached('distCopyEclipse'))
	.pipe(gulp.dest('D:/workSpace/makerplateform/webapp/instantcommunication/theme/css'))
	.pipe(gulp.dest('D:/tomcat7/webapps/makerplateform/instantcommunication/theme/css'));
});





版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

写一份gulp常用配置文件,构建前端工作流

目录目录 前言 创建项目 初始化项目 创建目录结构 编写Gulp配置 创建gulp的config文件 创建gulp的dev文件 创建gulp的prod文件 调用dev和prod方法 运行gulp 定义...

使用gulp来自动化部署前端项目

目录结构gulps/ ├── src/app/ 开发目录 │ ├── sass/ │ │ └─ main.scss │ ...

使用gulp创建一个项目

npm init -y //本地安装gulp(全局已经安装过了) npm init -y -g//全局安装gulp 创建 gulpfile.js 文件 gulpfile.js : var gulp =...

node.js利用gulp 启动webServer服务

做为前端人员,在没有公司内网服务器的情况下,想要在手机上调试代码。那么就通过本地起服务的方式来在手机上调试。 方法: 1:先安装node.js;去官方下载就好了。https://nodejs.or...

使用Gulp构建前端自动化解决方案

前一篇博客写了Gulp入门,这里详细的介绍一下如何用Gulp构建适合自己的前端工作流。我在学习的时候看了挺多资料,最后在kelsen大大的博客学会了,感觉通俗易懂,一步步做过去就好了。实际中每个人的需...

eclipse下开发java项目 -- 前端开发想使用 sublime怎么办?(借助gulp自动发布)

喜欢sublime编辑前端,可是java项目是用eclipse跑起来的,所以每次通过sublime编辑后要在eclipse上的文件刷新后,eclipse才自动同步到tomcat,该怎么破!...

利用Gulp实现自动化构建代码

利用Gulp实现自动化构建代码 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威...

gulp在项目中的使用

在之前的文章中,已经详细的讲述了怎么安装gulp,它的工作过程,然后现在来谈谈项目中的具体使用。 入门教程 http://blog.csdn.net/liuwengai/article/detai...

gulp前端工程化教程

gulp http://www.jianshu.com/p/525f1e024915 npm install -g gulp-concat 文件打包 npm install -g g...

gulp-前端项目自动化(工程化)

前端项目自动化
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用gulp构建一个项目
举报原因:
原因补充:

(最多只允许输入30个字)