专栏首页前端技术开发快速搭建gulp项目实战

快速搭建gulp项目实战

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

正文

1. 安装NodeJS,自行在node官网下载,并安装,通过node-v检查是否安装成功

2.在此项目中,使用的是cnpm进行安装的,如果想使用cnpm安装,去淘宝镜像安装cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org   安装cnpm 

2. 安装Gulp环境

1.安装全局环境,运行命令

npm install gulp –g

3. 项目中使用Gulp

     1.创建一个新的文件夹(gulp创建的文件夹),进行初始化  cnpm init会出现下面内容,并在文件夹中有一个package.json

2.在命令中运行安装本地Gulp环境

 cnpm install gulp --save-dev

3.在本地文件新建文件名为 gulpfile.js 文件: 

常用的一些方法

gulp.task 定义任务

gulp.src   找到执行文件

gulp.dest  执行任务的文件去出

gulp.watch 观察文件是否发生变化

4.安装一些常用的压缩包

cnpm install gulp-minify-css gulp-uglify gulp-concat --save-dev

/////////////////

1.css压缩   gulp-minify-css

2.js压缩   gulp-uglify

3.js合并   gulp-concat 

4.图片压缩    gulp-imagemin

5.less转化成css gulp-less

......

5.在文件中新建一个src目录,用于存放你文件,

6.实现一个文件合并,在src下面创建两个html文件

var gulp = require('gulp');


gulp.task("copyHtml",function(){
	gulp.src("src/*.html") //当前目录下所有的html文件
		.pipe(gulp.dest("dist")) //文件的去处
})
dist是通过 gulp copyHtml生成的文件夹

  常用的代码压缩

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');   图片压缩
var uglify = require("gulp-uglify");  js压缩
var less = require('gulp-less');      less
var cleanCSS = require('gulp-clean-css');  css压缩

//文件合并
gulp.task("copyHtml",function(){
	gulp.src("src/*.html")
		.pipe(gulp.dest("dist"))  //把src目录中所有html格式的文件全部合并到dist目录中
})

//图片压缩
gulp.task("imagemin",function() {
	gulp.src("src/images/*")   所有src > images中的图片
		.pipe(imagemin())  图片压缩
		.pipe(gulp.dest("dist/images"))  //放入到dist目录下面的images文件
})

//js压缩
gulp.task("uglify",function() {
	gulp.src("src/js/*.js")
		.pipe(uglify()) //压缩js代码
		.pipe(gulp.dest("dist/js")) //通过gulp uglify命令,自动输出dist下面js文件
})

//css压缩并less转换成css
gulp.task("lessc",function() {
	gulp.src("src/less/*.less")  //手动创建
		.pipe(less()) //将less文件编译成css文件
		.pipe(cleanCSS())  //压缩css
		.pipe(gulp.dest("dist/css"))   //通过gulp lessc 命令,自动输出dist/css文件
}) 

//监听文件是否有变化
gulp.task("watch",function(){
	gulp.watch("src/*.html",['copyHtml']);
	gulp.watch("src/images/*",['imagemin']);
	gulp.watch("src/js/*.js",['uglify']);
	gulp.watch("src/lessc/*.less",['lessc'])
})
通过输入gulp watch自动编译

目录中的结构

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • electron菜单的基本使用

    对electron了解之后,让我们学习创建一个窗口,使用自己的编写的窗口 搭建环境可以看https://www.cnblogs.com/zhoulifeng/p...

    小周sri的码农
  • webpack4配置学习(一)

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一...

    小周sri的码农
  • vue axios封装以及API统一管理

    在vue项目中,每次和后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行在浏览器端和node.js中。当项目越来越大的...

    小周sri的码农
  • 前端工程化 | 定制专属提速“外挂”(上)

    友情提示:推荐阅读时间15分钟 + 练习时间15分钟 HTML5学堂:上一期给大家分享了Gulp的安装与使用,让大家对Gulp有着初步的认识。咱们学习使用Gul...

    HTML5学堂
  • Gulp安装流程、使用方法及cmd常用命令导览

    xing.org1^
  • gulp自动化打包(上)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    j_bleach
  • gulp的安装和使用

    安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1、去nodejs官网安装n...

    小古哥
  • gulp常用插件 一

    如果你已经在项目中引入了gulp,那么不妨尝试用一些gulp集成好的插件来做一些任务。下面假定前端项目中根目录有src以及dist两个,分别用于开发和生产。 *...

    RobinsonZhang
  • hexo 博客性能优化

    博客搭建这么久了发现并没有进行过优化,首页虽然打开速度勉强能够接受,但是 github 和 coding 提供的空间有限,是时候优化一下了。基本思路是采用 gu...

    逆葵
  • gulp

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

    河湾欢儿

扫码关注云+社区

领取腾讯云代金券