美文网首页初见
gulp工具实战使用示例

gulp工具实战使用示例

作者: KBD001小龙 | 来源:发表于2017-04-10 18:15 被阅读48次

1.安装node.js

2.初始化这个项目

npm init
name:(text) 默认工程名
version:(1.0.0) 默认1.0.0
description: 项目描述选填
entry point:(gulpfile.js) 项目主要的js文件 选填 mian.js
test command: 测试的命令 选填
git repository: github仓库(默认关联的是自己项目的github仓库)
keywords: 关键字 选填
author: 作者 选填
license: 声明 选填
项目下会多一个package.json 文件
一路回车

3.安装gulp 打包工具,使用gulp 处理css,js,image

因为laravel提供了一个gulpfile.js文件,所以选择了gulp
sudo npm install --global gulp 安装成全局的gulp
sudo npm install --save-dev gulp 配置项目文件夹
查看gulp 版本
gulp -version
如果安装比较慢,更换为淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
随后就可以使用cnpm了;

4.gulp相关插件

安装gulp对应的重命名插件 cnpm install gulp-rename
安装gulp对应的合并文件插件 cnpm install gulp-concat
安装gulp对应的压缩css插件 cnpm install gulp-minify-css
安装gulp对应的压缩js插件 cnpm install gulp-uglify
安装gulp对应的压缩图片插件 cnpm install gulp-imagemin

5.开始使用gulp,在自己项目的gulpfile.js中编写一下内容

//引入下边的模块
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
// var imagemin = require('gulp-imagemin');

// 合并 css 并压缩
gulp.task('package-css', function() { //package-css自定义的任务名字
return gulp.src(['public/css/weui.css', 'public/css/swipe.css', 'public/css/book.css']) //需要压缩的css文件
.pipe(concat('book.css')) //压缩后的文件名字
.pipe(minifyCss()) //使用的函数模块
.pipe(rename('book.min.css')) //重命名压缩后的文件名为压缩名字
.pipe(gulp.dest('public/build')); //压缩后的文件存放的目录
});

// 压缩 js
gulp.task('package-js', function() {
return gulp.src(['public/source/mt4_jquery.mousewheel.js', 'public/source/mt4_perfect_scrollbar.js'])
.pipe(concat('mt4.js'))
.pipe(uglify())
.pipe(rename('mt4.min.js'))
.pipe(gulp.dest('public/build'));
});

// 移动图片
gulp.task('package-images1', function() {
return gulp.src('images/*')
.pipe(gulp.dest('build/images'));
});

// 工作流启动
gulp.task('default', ['package-css', 'package-js'], function() {
// 将你的默认的任务代码放在这

});

gulp.task('css', ['package-css'], function() {
// 将你的默认的任务代码放在这

});

gulp.task('js', ['package-js'], function() {
// 将你的默认的任务代码放在这

});

6.开始执行压缩任务

gulp default | gulp 默认执行default包含的任务
gulp css 执行指定的任务

相关文章

  • gulp工具实战使用示例

    1.安装node.js 2.初始化这个项目 3.安装gulp 打包工具,使用gulp 处理css,js,image...

  • html代码复用各种方法

    1.gulp-file-include(工具) 使用步骤:1.安装gulp以及gulp-file-include(...

  • gulp资源整理

    Gulp官网 Gulp中文网 Gulp插件网 博客: 前端构建工具gulpjs的使用介绍及技巧 - 无双 gulp...

  • gulp入门教程详解

    最近使用gulp自动化构建工具来开发网站,在此给大家分享一下使用gulp的一些使用教程。 一 gulp安装 1、安...

  • gulp-css压缩

    gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并 gulp是一个基于流的构建工具,可...

  • ES6项目构建方法

    任务自动化(gulp) gulp:自动化构建工具;任务自动化,就是说,尽量不使用人工,使用工具自动操作一些任务;g...

  • gulp

    简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp,使用npm首先得...

  • gulp

    简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp,使用npm首先得...

  • gulp

    简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp,使用npm首先得...

  • 自动化构建

    process.env.NODE_ENV读环境变量 Gulp 优化前端开发流程的工具。基于流,gulp.src使用...

网友评论

    本文标题:gulp工具实战使用示例

    本文链接:https://www.haomeiwen.com/subject/kxceattx.html