前端构建工具gulp
1、安装Node
首先,最基本也最重要的是,我们需要搭建node环境。访问 http://nodejs.org ,然后点击大大的绿色的 install 按钮,下载完成后直接运行程序,就一切准备就绪。 npm 会随着安装包一起安装,稍后会用到它。
安装完:
node -v
npm -v
可以查看node的版本,和node版本安装工具的版本。
2、安装gulp
cd切换到项目目录:
npm install -g gulp
-g表示在全局环境安装,以便任何项目都能使用它。
安装完gulp后
gulp -v
查看是否能正常显示版本号。
3、安装所需扩展
在项目目录下放package.json
- {
- "name": "cf",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "author": "",
- "license": "ISC",
- "devDependencies": {
- "del": "^2.2.2",
- "gulp": "^3.9.1",
- "gulp-amd-optimize": "^0.4.3",
- "gulp-autoprefixer": "^3.1.1",
- "gulp-clean-css": "^2.0.13",
- "gulp-concat": "^2.6.0",
- "gulp-css-spritesmith": "0.0.5",
- "gulp-imagemin": "^3.0.3",
- "gulp-jshint": "^2.0.1",
- "gulp-livereload": "^3.8.1",
- "gulp-notify": "^2.2.0",
- "gulp-rename": "^1.2.2",
- "gulp-ruby-sass": "^2.1.0",
- "gulp-uglify": "^2.0.0",
- "gulp.spritesmith": "^6.2.1",
- "jshint": "^2.9.4"
- }
- }
包可以根据自己需要选择性修改。
npm install运行,自动安装package.json中的扩展。
4、新建Gulpfile文件,运行gulp
- var gulp = require('gulp'),
- jshint = require('gulp-jshint'),
- uglify = require('gulp-uglify'),
- concat = require('gulp-concat'),
- rename = require('gulp-rename'),
- notify = require('gulp-notify'),
- amdOptimize = require('gulp-amd-optimize'),
- minifycss = require('gulp-clean-css'),
- imagemin = require('gulp-imagemin'),
- autoprefixer = require('gulp-autoprefixer'),
- sass = require('gulp-ruby-sass'),
- spritesmith = require('gulp.spritesmith'),
- cssSprite = require('gulp-css-spritesmith'),
- livereload = require('gulp-livereload'),
- del = require('del');
- //清理文件
- gulp.task('clean', function(cb) {
- del(['dist'], cb);
- });
- //处理css文件,合并压缩
- gulp.task('css',function(){
- return gulp.src( ['css/*.css'])
- .pipe(autoprefixer({
- borwsers: ['last 2 versions'," > 5% "]
- }))
- .pipe(concat('main.css'))
- .pipe(gulp.dest('dist/css'))
- .pipe(rename({suffix: '.min'}))
- .pipe(minifycss())
- .pipe(gulp.dest('dist/css'))
- .pipe(notify({ message: 'Css task complete' }));
- });
- gulp.task('cfjs-chat', function() {
- return gulp.src(['js/socket.io.js','js/json2.js','js/face.js','js/chat.js'])
- .pipe(jshint('.jshintrc'))
- .pipe(jshint.reporter('default'))
- //.pipe(amdOptimize( 'main'))
- .pipe(concat('cf-chat.js'))
- .pipe(gulp.dest('dist/js'))
- .pipe(rename('cf-chat.min.js'))
- .pipe(uglify())
- .pipe(gulp.dest('dist/js'))
- .pipe(uglify())
- .pipe(notify({ message: 'Scripts task complete' }));
- });
- //合并压缩JS文件
- gulp.task('scripts',['js'],function(){
- return gulp.src('js/util/*.js')
- .pipe(uglify())
- .pipe(gulp.dest('dist/js/util'))
- });
- //压缩图片
- gulp.task('img',function () {
- gulp.src('images/min/*')
- .pipe(imagemin({
- progressive: true
- }))
- .pipe(gulp.dest('dist/img'))
- .pipe(notify({ message: 'Images task complete' }));
- });
- //css精灵
- gulp.task('sprite',function ( cb ) {
- var spriteData = gulp.src('dist/img/*.png').pipe(spritesmith({
- imgName: 'sprite.png',
- cssName: 'sprite.css',
- padding: 2
- }));
- return spriteData.pipe(gulp.dest('sprite'));
- });
- //文件监控
- gulp.task( 'watch',function(){
- gulp.watch( 'css/**/*.*',[ 'css' ] );
- gulp.watch( 'js/**/*.*',[ 'scripts' ] );
- });
有需要要完整gulpfile.js的可以留言。不过这些都是比较老的技术了,现在流行的是:webpack。
更多请支持:http://www.webyang.net/Html/web/article_282.html
前端构建工具gulp相关推荐
- 55 前端构建工具Gulp
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.第三方模块Gulp Gulp:基于node平台开发的前端构建工具. 前端构建工具:将机 ...
- 前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
- 前端构建工具gulp的详细介绍以及使用
什么是 gulp 为什么要用 gulp 如何使用 gulp Installing Gulp Install the gulp command Install gulp in your devDepen ...
- 前端构建工具-gulp !(解决浏览器缓存问题)
一,为啥要用构建工具 项目中的js和css属于静态文件,客户端第一次访问的时候会缓存这些文件,那就意味着当我们需要改js跟css的时候,即使我们将文件中的代码改了重新发布,那么客户端也是看不到,客户端 ...
- 前端构建工具gulp之基本介绍
1.基本介绍 gulp.js是一个自动化构建工具,是自动化项目的构建利器.可以对网站的资源进行优化,将开发过程中一些重复的任务通过执行命令自动完成.这样能很大的提高我们的工作效率. gulp.js是基 ...
- “流式”前端构建工具——gulp.js 简介
Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什 ...
- 前端构建工具Gulp的学习和使用
前几天刚鼓捣了Grunt的使用,结果文档还没捂热,老大说我们还是用gulp吧,搞得我又得来整gulp,眼泪流成河了,真是不晓得底层人民的辛苦啊.不过经过对gulp的学习,发现很好用,比grunt舒服! ...
- 前端构建工具gulp入门教程
本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步 ...
- 前端构建工具gulp超详细配置, 使用教程(图文)
原文地址:http://www.cnblogs.com/2050/p/4198792.html, 我在原文中做了修改了一些错误和添加一些新的东西. 流程 1. 输入命令(可以使用git bash或者命 ...
最新文章
- 一种注册表沙箱的思路、实现
- Flow 常用知识点整理
- 验证input输入框(字母,数字,符号,中文)
- IOS开发中的几种设计模式介绍
- TensorFlow的新型模型优化工具包可使模型速度提高3倍
- 关于 C# select 读取 Excel 数据 为空,或成科学计数法解决方案
- python实现匿名发邮件_Python里实现发送邮件的方法
- WIN32 获取programdata等指定的系统目录的路径
- CCF-CSP 201809-2买菜 满分题解
- 电脑技巧 之 Discord翻译插件(PC端)(保姆级教程)
- 她他它的用法?收藏给小孩看吧
- 小米路由器青春版装linux,小米路由器青春版开启SSH
- STM32F103写入Flash
- 大学计算机改革PPT,大学计算机课程改革ppt.ppt
- E: The repository ‘http://ppa.launchpad.net/appimagelauncher-team/stable/ubuntu bionic Release‘ does
- 京东宙斯杯应用大赛 推荐宝 刷票记录 有图有真相
- 美容院管理系统的完整会员管理流程
- 基于springboot校园二手市场平台
- Kali工具库之whatweb
- java timeunit_TimeUnit类 java.util.concurrent.TimeUnit