使用Gulp实现前端构建自动化

安装

一.安装NodeJs

Gulp的安装依赖于NodeJs的npm安装管理器

安装包下载地址

关于npm命令:
1. npm install <name>
会把插件安装到node_modules目录中
2. 参数 --save
会在package.json的dependencies属性下添加该插件
3. 参数 --save-dev:
会在package.json的devDependencies属性下添加添加该插件
4. 参数 -g
全局安装插件
4. npm install
会安装package.json下dependencies和 devDependencies声明的插件
5. 使用原则:
运行时需要用到的包使用--save,否则使用--save-dev。

二.安装Gulp

  1. 执行 npm init 初始化package.json ————便于共同开发时安装插件
  2. 执行 npm install -save gulp

三.Gulp的使用

1.在项目根目录下创建一个gulpfile.js文件

2.在gulpfile.js文件下引入gulp

var gulp = require('gulp');

3.创建默认任务

//执行 gulp 会默认执行该任务
gulp.task('default', function() { });

4.文件移动指令

//目标文件
gulp.task('movecss', function() {
gulp.src('*.css')//指定源文件
.pipe(
gulp.dest('minicss')//输出到指定的目录 若该目录不存在会自动创建
);
});

5.监听文件变化执行一些操作

//目标文件
gulp.task('watchjs', function() {
gulp.watch('main.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});

6.在一个task下引用其他task

//多个task
gulp.task('tasks', ['movecss','watchjs'], function() {
console.log('last task');
}); //会按顺序执行
gulp.task('default', ['movecss', 'watchjs']);

四.常用插件

1.压缩CSS---gulp-minify-css

安装:

npm install gulp-minify-css --save-dev

用法:
//引入gulp-minify-css
var cssminify = require('gulp-minify-css');
//压缩css 并移动到指定的文件夹
gulp.task('cssmin', function () {
gulp.src('*.css')
.pipe(cssminify())
.pipe(gulp.dest('minicss'));
});

2.压缩js---gulp-minify

安装:

npm install --save-dev gulp-minify

用法:
//压缩js
gulp.task('compress', function () {
gulp.src('*.js')
.pipe(minify({
ext:{
src:'-debug.js',//源文件的扩展名
min:'-min.js' //压缩过的文件的扩展名
},
exclude: ['folder'], //排除的目录
ignoreFiles: ['gulpfile.js'] //不压缩的文件
}))
.pipe(gulp.dest('minijs'))
});

3.gulp-clean

安装:

npm install --save-dev gulp-clean

用法:
//清除文件
gulp.task('clean-mini-js', function () {
return gulp.src('minijs', {read: false})
.pipe(clean());
});

其他常用插件

  • gulp-manifest
  • run-sequence
  • gulp-exec
  • gulp-css-urls
  • gulp-minify-css
  • gulp-htmlmin
  • gulp-imagemin
  • gulp-uglify
  • gulp-concat
  • gulp-rename

Github--本文代码

参考链接:

加速npm install 方法

Gulp中文网

npm 安装相关知识

gulp-minify-css

gulp-minify

gulp-clean

使用Gulp实现前端构建自动化的更多相关文章

  1. Gulp常用前端流程自动化配置

    前言 近期的项目全部由Grunt + LESS 转向改用Gulp + SASS 进行前端开发,也就奔着Gulp那比较好用的自定义函数而来的. 一.package.json文件配置如下: { " ...

  2. node和gulp实现前端工程自动化(附:gulp常用插件)

    /** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包,因为这个包提供了一些APIv ...

  3. 前端构建大法 Gulp 系列 (四):gulp实战

    前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...

  4. 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  5. 前端构建大法 Gulp 系列 (二):为什么选择gulp

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  6. 前端构建大法 Gulp 系列 (一):为什么需要前端构建

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  7. 前端构建大法 Gulp 系列

    参考: 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp ...

  8. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  9. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

随机推荐

  1. Linux Set Command

    1. set -e "Exit immediately if a simple command exits with a non-zero status." When this o ...

  2. Adobe Photoshop CS6中文破解MAC版

    Adobe Photoshop CS6中文破解MAC版 下载地址及破解方法 http://www.sdifenzhou.com/657.html

  3. netsh & winsock & 对前端的影响

    netsh 与 winsock 一个是window的脚本工具,另一个则是window是网络编程中要用到的网络接口,而非要说跟我小小的前端有什么影响,那还真有...,当然这个影响是很不好的,比如node ...

  4. Hibernate SQLQuery 原生SQL 查询及返回结果集处理-2

    1. 返回List, .setResultTransformer(      Transformers.ALIAS_TO_ENTITY_MAP);将结果转为Map,存放到list中,即list中为若干 ...

  5. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  6. 【T-SQL进阶】02.理解SQL查询的底层原理

    本系列[T-SQL]主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础]04.表表达式 ...

  7. canvas实现视频截图

    截取视频当前播放画面,直接上源码. <body> <div class="container"> <video id="test" ...

  8. iOS bug调试技巧学习----breakpoint&condition

    给断点添加条件 - (void)testCondition2 { NSArray *array = @[@"我们", @"一起", @"来" ...

  9. Replication-删除发布备注

    1.删除replication,先删除replication的作业,再删除对应的订阅,再删除发布: 2.相关脚本:删除监视器里不存在的条目sp_removedistpublisherdbreplica ...

  10. node.js零基础详细教程(6):mongodb数据库操作

    第六章 建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...