gulp.js 自动化构建工具学习入门

一、基本安装

1、安装gulp

1 $ npm install --global gulp

2、作为项目的开发依赖安装

1 $ npm install --save-dev gulp

3、在项目根目录下创建 gulpfile.js 的文件

1 var gulp = require(‘gulp‘)
2
3 gulp.task(‘default‘,function(){
4      //将你的默认任务代码放在这里
5 })

4、运行gulp:

$ gulp

以下文章参考来源:作者:Rin阳    链接:https://www.jianshu.com/p/98db023b5b89

二、前端自动化Gulp工具常用插件

1、gulp-uglify(JS压缩)


gulp-uglify安装:

npm install --save-dev gulp-uglify

gulp-uglify用来压缩js文件,使用的是uglify引擎

var gulp = require(‘gulp‘);  //加载gulp
var uglify = require(‘gulp-uglify‘);  //加载js压缩

// 定义一个任务 minifyjs
gulp.task(‘minifyjs‘, function () {
    gulp.src([‘js/*.js‘,‘!js/*.min.js‘])  //获取文件,同时过滤掉.min.js文件
        .pipe(uglify())   //压缩
        .pipe(gulp.dest(‘dist/js‘));   //输出
});

2、gulp-minify-css(css压缩)

 gulp-minify-css安装:

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

可以使用它来压缩css文件

var gulp = require(‘gulp‘);
var minify = require(‘gulp-minify-css‘);

gulp.task(‘cssmini‘, function () {
    gulp.src([‘css/*.css‘, ‘!css/*.min.css‘])  //要压缩的css
        .pipe(minify())
        .pipe(gulp.dest(‘dist/css‘));
});

3、gulp-minify-html(html压缩)

gulp-minify-html 安装:

npm install --save-dev gulp-minify-html

可以使用它来压缩html文件

var gulp = require(‘gulp‘);
var htmlmini = require(‘gulp-minify-html‘);

gulp.task(‘htmlmini‘, function () {
    gulp.src(‘*.html‘)
        .pipe(htmlmini())
        .pipe(gulp.dest(‘dist/minihtml‘));
})

4、gulp-imagemin(图片压缩)

gulp-minify-html 安装:

npm install --save-dev gulp-imagemin

可以使用gulp-imagemin的插件来压缩jpg、png、gif等图片。(imagemin也是有插件的,是基于imagemin产生的插件,所以前缀是imagenin开头)

压缩png插件-imagemin-pngquant安装:

npm install --save-dev imagemin-pngquant

gulipfile.js:

var gulp = require(‘gulp‘);
var imagemin = require(‘gulp-imagemin‘);
var pngquant = require(‘imagemin-pngquant‘); //png图片压缩插件

gulp.task(‘default‘, function () {
    return gulp.src(‘src/images/*‘)
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant来压缩png图片
        }))
        .pipe(gulp.dest(‘dist/imgmini‘));
});

5、gulp-concat(文件合并)
gulp-concat 安装:

npm install --save-dev gulp-concat

合并css与js文件,减少http请求

var gulp = require(‘gulp‘);
var concat = require("gulp-concat");

gulp.task(‘concat‘, function () {
    gulp.src(‘js/*.js‘)  //要合并的文件
    .pipe(concat(‘all.min.js‘))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(uglify()) //压缩
    .pipe(gulp.dest(‘dist/js‘)); //输出
});

6、gulp-css-spriter(合成雪碧图)

gulp-css-spriter安装:

npm install gulp-css-spriter

gulpfile.js文件:


var gulp = require(‘gulp‘);

var spriter=require(‘gulp-css-spriter‘);

gulp.task(‘spriter‘,function(){
    gulp.src(‘./src/assets/css/user.css‘)
        .pipe(spriter({
            ‘spriteSheet‘:‘dist/imgmin/spritesheet.png‘,// 这是雪碧图自动合成的图
            ‘pathToSpriteSheetFromCSS‘:‘../../../dist/imgmin/spritesheet.png‘// 这是在css引用的图片路径
        }))
        .pipe(gulp.dest(‘./dist/css‘));// 输出
})

7、执行多个任务、监听文件变化

gulp.task(‘build‘,[‘minifyjs‘,‘imagemin‘,‘cssmin‘]);
// 监听文件变化
 gulp.task(‘watch‘, function () {     gulp.watch([‘static/mui/js/*.js‘,‘static/*.js‘,‘!static/mui/js/*.min.js‘,‘src/assets/img/*‘], [‘build‘]);
// });
gulp.task(‘default‘, [‘build‘,‘watch‘]);
时间: 2024-10-09 06:57:43

gulp.js 自动化构建工具学习入门的相关文章

gulp 前端自动化构建工具

gulp是基于nodejs的自动化构建工具, 可自动化完成js css sass less html image的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成.监听文件. 1:基于nodejs先装nodejs(.msi) 2:命令行装npm,npm是nodejs的包管理工具,对node插件进行安装.卸载等 npm install XX -g  安装XX插件 全局安装 --save 将保存配置保存至package.json(package.json把安装插件信息保存到此,可供其他开

前端项目自动化构建工具——Webpack入门教程

参考资料:https://www.webpackjs.com/(中文文档)   https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置属性,不附带实例,将会以通俗易懂的形式地讲解:如若需要实例进行相关练习,可将本文作为理论基础: Webpack是前端项目自动化构建工具,本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构

【Node.js学习笔记】使用Gulp项目自动化构建工具

刚接触node.js,对前端的一些东西还不是很清楚,据说Gulp这东西很强大,先来看看从网上抄的一段关于自动化构建的描述: 在为数众多的中小型软件作坊中,不存在自动化构建和发布工具.构建.交付准备环境.代码发布全由手工完成,同样还有运行测试.备份旧版本.新版本打标签以及许多其他重复的事情.毕竟你可能认为这全是非常简单的工作,集成开发环境通过按钮或快捷键就可构建项目,你开启两个窗口拖放少许文件或文件夹即可完成网站发布.但当你在维护代码库和应用时所有这些事情加在一起,这里几分钟,那里几分钟,最终会浪

gulp前端自动化构建工具入门篇

现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用? 什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率. 为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化:文件合

Gulp:自动化构建工具

一.介绍: gulp是一个基于流的构建工具,可以自动执行指定的任务,简洁且高效 二.优点: 开发环境下,想要能够按模块组织代码,监听实时变化 css/js预编译,postcss等方案,浏览器前缀自动补全等 条件输出不同的网页,比如app页面和mobile页面 线上环境下,我想要合并.压缩 html/css/javascritp/图片,减少网络请求,同时降低网络负担 三.安装: 1.全局安装:cnpm install -g gulp 2.本地安装:cnpm install --save-dev g

gulp自动化构建工具

gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ,插件   本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 http:/

JavaScript自动化构建工具入门----grunt、gulp、webpack

蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 安装 常用插件.压缩插件.合并插件等.  用插件实现 功能无限扩展 简单介绍三种工具 grunt 是js任务管理工具(自动化构建工具)    -- Grunt官网 戳这里 优势:出来早 社区成熟  插件全 缺点:配置复杂   效率低 (cpu占用率高) -------------------------

做一个合格的前端,gulp自动化构建工具入门教程

我的新作观点网http://www.guandn.com (观点网是一个猎获新奇.收获知识.重在独立思考的网站),它前端js.css的压缩.合并.md5命名等就使用了gulp自动化构建技术,gulp很小巧使用起来很舒服.ps:接下来我会逐一开源观点网开发过程中的前后端技术,如:lucene全文索引.自定义富文本编辑器.图片上传压缩水印等等. 一.什么是gulp gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.例如:css.js的合并与压缩(减少http请求,缩小文

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

前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率.致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程.提高效率.减少错误率.随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部