gulp.基础
1.安装
全局安装
npm install --global gulp
作为项目的开发依赖安装
npm install gulp --save-dev
2.在根目录下创建一个名为gulpfile.js的文件
let gulp = require('gulp');
let cleanCSS = require('gulp-clean-css');//css 打包
let concat = require('gulp-concat');//文件整合
let uglify = require('gulp-uglify');//js压缩插件
let zip = require('gulp-zip');//zip压缩文件
let less = require('gulp-less');//less压缩
gulp.task('minify-css', () => {
return gulp.src('css/imdex.css')
.pipe(concat('imdex.min.css'))
.pipe(cleanCSS())
.pipe(gulp.dest('./css'));
});
gulp.task('uglify-js',()=>{
return gulp.src('./js/*.js')
.pipe(uglify())
.pipe(concat)
.pipe(gulp.dest('./js'))
})
gulp.task('zip-suo',()=>{
return gulp.src('./src/*')
.pipe(zip())
.pipe(gulp.dest('./'))
})
gulp.task('testLess', function () {
gulp.src('src/less/index.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(cleanCSS())
.pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});
gulp.task('default',['minify-css','uglify-js','testLess']);
gulp.基础的更多相关文章
- gulp基础操作实践
按照gulp中文文档对gulp基础操作的一些实践练习,记录以防忘掉. 一,选择并输出文件:gulp.src(globs[,options]) eg:gulp.src('src/less/index.l ...
- Gulp基础
1.什么是gulp? gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. 2.为什么使用gulp? gulp不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工 ...
- gulp基础使用总结
gulp 安装 1 检测电脑有没有安装node 执行 $ node -v $ npm -v 如果没有安装的话,可以到https://nodejs.org/en/download/下载安装. 2 全局安 ...
- gulp 基础运用
全局安装gulp $npm install --global gulp 作为项目的开发依赖安装 //--save-dev 开发依赖,储存在package.json的devDependencies中,如 ...
- Gulp基础知识
首先,我们需要了解Gulp能做些什么? 编译 sass sass是什么?(使CSS可以用编程的方式写,加快我们开发的速度) ...
- gulp基础使用及进阶
提示:路径中不允许出现中文,否则scss编译会出错,大概. 按照惯例,先检查一下Node.js.npm(cnpm).gulp的版本号 1.新建package.json 我们可以通过手动新建这个配置文件 ...
- 【gulp】工作中的实战
写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的 ...
- Gulp真实项目用例
包括了less预编译,css压缩,html文件include引入,js混淆压缩,本地开发热刷新服务器,html压缩,版本号添加 github地址: gulpfile.js var gulp = req ...
- gulp学习-gulpfile
安装gulp 假设已经安装了node 和npm (淘宝的cnpm很适合国内使用). 1.首页全局安装gulp. 1 npm install --global gulp 2.其次局部安装gulp.(注: ...
随机推荐
- spring 循环依赖问题
今天碰到一个问题,项目启动,初始化bean的时候,报下面的错: Bean with name ‘*********’ has been injected into other beans [***** ...
- springboot 02-PropertiesFile 自定义配置属性,多环境配置
application.properties: # 自定义配置 test.hello.world = HelloWorld test.person.name = 哈哈 test.person.sex ...
- 第25月第2天 Django-By-Example项目记录01
1. export PATH="$PATH":/Applications/XAMPP/xamppfiles/bin/ sudo ln -s /Applications/XAMPP/ ...
- Intellij idea安装
1.官网下载 官网: https://www.jetbrains.com/idea/ 旗舰版(涵盖所有功能的)和社区版 2.下载旗舰版 3.创建maven项目 IDE的设置 setting:当前项目的 ...
- CPU缓存一致性协议—MESI详解
MESI(也称伊利诺斯协议)是一种广泛使用的支持写回策略的缓存一致性协议,该协议被应用在Intel奔腾系列的CPU中. MESI协议中的状态 CPU中每个缓存行使用的4种状态进行标记(使用额外的两位b ...
- shiro 和 跨域过滤器冲突
在web.xml 中 cros要写在shiro 的配置前面,如下,不然会先过shiro 过滤器就产生跨域问题, 参考web.xml 的过滤器加载顺序 <!-- 跨域请求 --> <f ...
- linux 文件处理命令
- pythonのscrapy抓取网站数据
(1)安装Scrapy环境 步骤请参考:https://blog.csdn.net/c406495762/article/details/60156205 需要注意的是,安装的时候需要根据自己的pyt ...
- jenkins服务器上安装配置Android SDK
1.下载Android SDK http://tools.android-studio.org/index.php/sdk/ 我下载的是:android-sdk_r24.4.1-linux.tgz ...
- Linux信号-信号集&信号屏蔽字&捕捉信号【转】
转自:https://blog.csdn.net/Lycorisradiata__/article/details/80096203 一. 阻塞信号 1. 信号的常见其他概念 实际执行信号的处理 ...