基于Node.js的JavaScript项目构建工具gulp的使用方法
这篇文章主要介绍了关于基于Node.js的JavaScript项目构建工具gulp的使用方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
也许你使用过grunt,那么这里来安利gulp的话就更加不会陌生了,下面我们就来看一下基于Node.js的JavaScript项目构建工具gulp的使用教程
npm install gulp --save-dev
什么是gulp?
gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习。 gulp 使用 stream 方式处理内容。Node催生了一批自动化工具,像Bower,Yeoman,Grunt等。
gulp和grunt的异同点
易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理。
高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。
高质量:Gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。
易于学习:通过把API降到最少,你能在很短的时间内学会Gulp。构建工作就像你设想的一样:是一系列流管道。
因为gulp是用node.js写的,所以你需要在你的终端上安装好npm。npm是node.js的包管理器,所以先在你的机子上安装好node.js吧。
gulp安装命令
sudo npm install -g gulp
在根目录下新建package.json文件
npm init .
安装gulp包
安装好后再次输入gulp -v查看版本号,如下图显示则为成功:
安装插件
安装常用插件:
sass的编译 (gulp-ruby-sass)
自动添加css前缀 (gulp-autoprefixer)
压缩css (gulp-minify-css)
js代码校验 (gulp-jshint)
合并js文件 (gulp-concat)
压缩js代码 (gulp-uglify)
压缩图片 (gulp-imagemin)
自动刷新页面 (gulp-livereload)
图片缓存,只有图片替换了才压缩 (gulp-cache)
更改提醒 (gulp-notify)
清除文件 (del)
安装这些插件需要运行如下命令:
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev-save和-save-dev可以省掉你手动修改package.json文件的步骤。
npm install module-name -save
自动把模块和版本号添加到dependencies部分
npm install module-name -save-dev
自动把模块和版本号添加到devdependencies部分
gulp命令
你仅仅需要知道的5个gulp命令
gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
gulp.run(tasks...):尽可能多的并行运行多个task
gulp.watch(glob, fn):当glob内容发生改变时,执行fn
gulp.src(glob):置需要处理的文件的路径,可以是多个文件以数组的形式,也可以是正则
gulp.dest(path[, options]):设置生成文件的路径
glob:可以是一个直接的文件路径。他的含义是模式匹配。
gulp将要处理的文件通过管道(pipe())API导向相关插件。通过插件执行文件的处理任务。
gulp.task('default', function () {...});
gulp.task这个API用来创建任务,在命令行下可以输入$ gulp [default],(中括号表示可选)来执行上面的任务。
gulp官方API文档:https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 插件大全:http://gulpjs.com/plugins/
开始构建项目
在项目根目录下新建一个gulpfile.js文件,粘贴如下代码:
//在项目根目录引入gulp和uglify插件 var gulp = require('gulp'); var uglify = require('gulp-uglify'); gulp.task('compress',function(){ return gulp.src('script/*.js') .pipe(uglify()) .pipe(gulp.dest('dist')); });
注:gulpfile.js文件名不可更改。
项目需要用到uglify和rename插件,执行以下命令安装:
npm install --save-dev gulp-uglify npm install --save-dev gulp-rename
以我的为例,进入gulpfile.js所在目录:
cd /Users/trigkit4/gulp-test
然后输入:
var gulp = require('gulp'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); gulp.task('compress',function(){ return gulp.src('script/*.js') .pipe(uglify()) .pipe(rename('jquery.ui.min.js')) .pipe(gulp.dest('dist')); });
该命令会安装package.json下的全部依赖,如下图所示:
完整的gulpfile.js
// 载入外挂 var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = require('gulp-imagemin'), rename = require('gulp-rename'), clean = require('gulp-clean'), concat = require('gulp-concat'), notify = require('gulp-notify'), cache = require('gulp-cache'), livereload = require('gulp-livereload'); // 样式 gulp.task('styles', function() { return gulp.src('src/styles/main.scss') .pipe(sass({ style: 'expanded', })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(gulp.dest('dist/styles')) .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) .pipe(gulp.dest('dist/styles')) .pipe(notify({ message: 'Styles task complete' })); }); // 脚本 gulp.task('scripts', function() { return gulp.src('src/scripts/**/*.js') .pipe(jshint('.jshintrc')) .pipe(jshint.reporter('default')) .pipe(concat('main.js')) .pipe(gulp.dest('dist/scripts')) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest('dist/scripts')) .pipe(notify({ message: 'Scripts task complete' })); }); // 图片 gulp.task('images', function() { return gulp.src('src/images/**/*') .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) .pipe(gulp.dest('dist/images')) .pipe(notify({ message: 'Images task complete' })); }); // 清理 gulp.task('clean', function() { return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false}) .pipe(clean()); }); // 预设任务 gulp.task('default', ['clean'], function() { gulp.start('styles', 'scripts', 'images'); }); // 看守 gulp.task('watch', function() { // 看守所有.scss档 gulp.watch('src/styles/**/*.scss', ['styles']); // 看守所有.js档 gulp.watch('src/scripts/**/*.js', ['scripts']); // 看守所有图片档 gulp.watch('src/images/**/*', ['images']); // 建立即时重整伺服器 var server = livereload(); // 看守所有位在 dist/ 目录下的档案,一旦有更动,便进行重整 gulp.watch(['dist/**']).on('change', function(file) { server.changed(file.path); }); });
注:pipe()是stream模块里传递数据流的一个方法,第一个参数为插件方法,插件会接收从上游流下的文件,进行处理加工后,再往下流。
gulp.task('任务名称', function () { return gulp.src('文件路径') .pipe(...) .pipe(...) // 直到任务的最后一步 .pipe(...); });
gulp插件
gulp-gh-pages:使用gulp来把markdown生成html文档并上传到git pages上
https://github.com/shinnn/gulp-gh-pages
var gulp = require('gulp'); var ghPages = require('gulp-gh-pages'); gulp.task('deploy', function() { return gulp.src('./dist/**/*') .pipe(ghPages()); });
gulp-jade插件:将jade编译成html文件
gulp-less插件:将less编译成css文件
var less = require('gulp-less'); var path = require('path'); gulp.task('less', function () { return gulp.src('./less/**/*.less') .pipe(less({ paths: [ path.join(__dirname, 'less', 'includes') ] })) .pipe(gulp.dest('./public/css')); }); gulp-live-server 插件:方便的,轻量级的服务器 var gulp = require('gulp'); var gls = require('gulp-live-server'); gulp.task('serve', function() { //1. serve with default settings var server = gls.static(); //equals to gls.static('public', 3000); server.start(); //2. serve at custom port var server = gls.static('dist', 8888); server.start(); //3. serve multi folders var server = gls.static(['dist', '.tmp']); server.start(); //use gulp.watch to trigger server actions(notify, start or stop) gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) { server.notify.apply(server, [file]); }); });
gulp-livereload,可以实时保存刷新,那样就不用按F5和切换界面了
gulp-load-plugins:在你的package.json文件中自动加载任意的gulp插件
$ npm install --save-dev gulp-load-plugins
例如一个给定的package.json文件如下:
{ "dependencies": { "gulp-jshint": "*", "gulp-concat": "*" } }
在gulpfile.js中添加如下代码:
var gulp = require('gulp'); var gulpLoadPlugins = require('gulp-load-plugins'); var plugins = gulpLoadPlugins(); plugins.jshint = require('gulp-jshint'); plugins.concat = require('gulp-concat');
gulp-babel:gulp 的babel插件,
$ npm install --save-dev gulp-babel babel-preset-es2015
使用方法:
const gulp = require('gulp'); const babel = require('gulp-babel'); gulp.task('default', () => { return gulp.src('src/app.js') .pipe(babel({ presets: ['es2015'] })) .pipe(gulp.dest('dist')); });
官方github: https://github.com/gulpjs/gulp
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上是基于Node.js的JavaScript项目构建工具gulp的使用方法的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

PiNetwork节点详解及安装指南本文将详细介绍PiNetwork生态系统中的关键角色——Pi节点,并提供安装和配置的完整步骤。Pi节点在PiNetwork区块链测试网推出后,成为众多先锋积极参与测试的重要环节,为即将到来的主网发布做准备。如果您还不了解PiNetwork,请参考Pi币是什么?上市价格多少?Pi用途、挖矿及安全性分析。什么是PiNetwork?PiNetwork项目始于2019年,拥有其专属加密货币Pi币。该项目旨在创建一个人人可参与

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数:要插入的新节点和参考节点(即新节点将要被插入的位置的节点)。
