gulp的安装和使用

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

1、去nodejs官网安装nodejs

2、打开命令行,OSX是终端,windows是命令提示符(window + r 输入cmd回车)

3、使用npm(nodejs的包管理器),或选装cnpm执行npm install cnpm -g --registry=https://registry.npm.taobao.org

4、全局安装gulp:(c)npm install gulp -g

5、新建package.json到项目根目录【非必选】(josn文件需删除注释,此用来记录项目信息和配置初始插件)

 1 {
 2   "name": "test",   //项目名称(必须)
 3   "version": "1.0.0",   //项目版本(必须)
 4   "description": "This is for study gulp project !",   //项目描述(必须)
 5   "homepage": "",   //项目主页
 6   "repository": {    //项目资源库
 7     "type": "git",
 8     "url": "https://git.oschina.net/xxxx"
 9   },
10   "author": {    //项目作者信息
11     "name": "surging",
12     "email": "surging2@qq.com"
13   },
14   "license": "ISC",    //项目许可协议
15   "devDependencies": {    //项目依赖的插件
16     "gulp": "^3.8.11",
17     "gulp-less": "^3.0.0"
18   }
19 }

6、本地项目安装,命令行定位项目目录后执行:(c)npm install --save-dev(根据package.json的配置,安装组件到项目)

  若忽略第五步,则这里只执行:(c)npm install gulp --save-dev(仅安装gulp到项目)

7、安装需要的gulp组件(绿色部分为需要安装的组件)另sass编译需提前安装ruby。(如第五步配置完成,此步忽略)

npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint gulp-uglify gulp-imagemin gulp-rename gulp-concat gulp-htmlmin gulp-notify gulp-cache gulp-livereload --save-dev

8、新建gulpfile.js【必选重要】

 1 /*!
 2  * gulp
 3  * $ npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint gulp-uglify gulp-imagemin gulp-rename gulp-concat gulp-htmlmin gulp-notify gulp-cache gulp-livereload --save-dev
 4  */
 5 // 加载插件
 6 var gulp = require('gulp'),//加载gulp
 7     sass = require('gulp-sass'),//编译sass
 8     autoprefixer = require('gulp-autoprefixer'),//补全浏览器前缀
 9     minifycss = require('gulp-minify-css'),//压缩css为min
10     spriter = require('gulp-css-spriter'),//图片合并css精灵
11     jshint = require('gulp-jshint'),//js查错
12     uglify = require('gulp-uglify'),//压缩js
13     imagemin = require('gulp-imagemin'),//压缩图片
14     rename = require('gulp-rename'),//重命名gulp
15     concat = require('gulp-concat'),//合并js
16     html = require('gulp-htmlmin'),//压缩HTML
17     notify = require('gulp-notify'),//显示信息
18     cache = require('gulp-cache'),//压缩图片过滤(仅修改图片压缩)
19     livereload = require('gulp-livereload');// 网页自动刷新
20 
21 //处理样式
22 gulp.task('styles', function() { var timestamp = +new Date();
23     return gulp.src('style/**/*.scss')//表示css及子文件夹中的所以文件
24         .pipe(sass())
25         .pipe(autoprefixer({browsers:['last 3 versions','ie >= 10','ie_mob >= 10','ff >= 30','chrome >= 34','safari >= 6','opera >= 12.1','ios >= 6','android >= 4.4','bb >= 10','and_uc 9.9']}))//支持浏览器种类
26         .pipe(rename({ suffix: '.min' }))//重命名加min后缀
27 //        .pipe(spriter({
28 //            'spriteSheet': 'images/sprite'+timestamp+'.png',// 生成的spriter的位置
29 //            'pathToSpriteSheetFromCSS': '../images/sprite'+timestamp+'.png'// 生成样式文件图片引用地址的路径,如:backgound:url(../images/sprite20324232.png)
30 //        }))
31         .pipe(minifycss({keepBreaks: true}))//分行显示
32         .pipe(gulp.dest('css'))//保存到指定目录
33         .pipe(notify({ message: 'Styles task complete' }));//打印信息
34 });
35 
36 ////图片精灵
37 //gulp.task('spriter',function() {
38 //    var timestamp = +new Date();
39 //    //需要自动合并雪碧图的样式文件
40 //    return gulp.src('css/*.css')
41 //        .pipe(spriter({
42 //            // 生成的spriter的位置
43 //            'spriteSheet': 'images/sprite'+timestamp+'.png',
44 //            // 生成样式文件图片引用地址的路径,如:backgound:url(../images/sprite20324232.png)
45 //            'pathToSpriteSheetFromCSS': 'images/sprite'+timestamp+'.png'
46 //        }))
47 //        .pipe(minifycss())
48 //        .pipe(gulp.dest('css'));
49 //});
50 
51 
52 //处理js
53 gulp.task('scripts', function() {
54     return gulp.src('script/**/*.js')
55         .pipe(jshint())
56         .pipe(jshint.reporter('default'))
57         //.pipe(concat('all.js'))
58         .pipe(rename({ suffix: '.min' }))
59         .pipe(uglify())
60         .pipe(gulp.dest('js'))
61         .pipe(notify({ message: 'Scripts task complete' }));
62 });
63 
64 
65 //处理图片
66 //gulp.task('images', function() {
67 //    return gulp.src(['pic/**/*.png','pic/**/*.jpg'])
68 //        .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
69 //        .pipe(gulp.dest('images'))
70 //        .pipe(notify({ message: 'Images task complete2' }));
71 //});
72 
73 //默认执行
74 gulp.task('default', function() {
75     gulp.start('styles', 'scripts');
76 });
77 
78 // 监测变更执行gulp
79 gulp.task('watch', function() {
80     gulp.watch('style/**/*.scss', ['styles']);//处理样式
81     gulp.watch('script/**/*.js', ['scripts']);//处理js
82     //gulp.watch('pic/**', ['images']);//处理图片
83     // Create LiveReload server
84     livereload.listen();
85     // Watch any files in assets/, reload on change
86     gulp.watch(['style/**/*.scss','script/**/*.js']).on('change', livereload.changed);
87 });

9、执行gulp,命令行指定项目目录后执行:gulp+回车=进行单次编译

10、gulp watch监听文件修改自动执行,Ctrl+C停止监听

以上内容来自网络整理及实际操作,如有不当欢迎讨论

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逻辑熊猫带你玩Python

Linux | 从windows来到Linux,目录操作

推荐新手使用Ubuntu16.04 LTS的桌面版,在桌面版提供了桌面系统,虽然论速度和便利性与windows平台想去甚远,但是从学习的角度讲,可以省去很多麻烦...

543
来自专栏月色的自留地

在Mac上使用vs-code快速上手c语言学习(入门文,老鸟退散)

1844
来自专栏向治洪

iOS如何实现多个环境一次打包

概述 偶然看到一个很有趣的问题:如何在ios环境下实现多个环境同时打包。 谈到多环境,我想大多公司都至少有2-3个环境,比如Test环境,UAT(User Ac...

2436
来自专栏Crossin的编程教室

把你开发的网站免费发布到互联网上(2)

前几天,我们介绍了通过 PythonAnywhere 在互联网上创建一个站点: 把你开发的网站免费发布到互联网上(1) 本篇是上一篇的延续,来讲一讲如何将已有的...

2889
来自专栏伪君子的梦呓

安装和配置 Eclipse

之前安装了 Java 并且配置好了 Java 的环境变量,现在来搞一下开发环境,下面就是下载安装和配置 Eclipse 的教程。

451
来自专栏魏艾斯博客www.vpsss.net

宝塔面板安装后需要改掉默认端口和登陆账号

2292
来自专栏Java技术栈

Java Jar包的压缩、解压使用指南

什么是jar包 JAR(Java Archive)是Java的归档文件,它是一种与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。 如何打/解包 使用j...

3365
来自专栏流柯技术学院

Atom + activate-power-mode震屏插件Windows7下安装

Atom是Github推出的一个文本编辑器,搜索一下大概是给Web前端用的,最近比较火的是他的一个插件activate-power-mode,可以实现打字屏振效...

682
来自专栏前端说吧

SASS环境搭建及HBuilder中sass预编译配置

3476
来自专栏mukekeheart的iOS之旅

iOS崩溃日志ips文件解析

  测试组的同事在进行稳定性测试时,通常会遇到一些崩溃,然后他们会将这些崩溃日志(一般是ips格式的文件)反馈给开发进行分析,但是这些ips文件中的内容通常是如...

703

扫描关注云+社区