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.基础的更多相关文章

  1. gulp基础操作实践

    按照gulp中文文档对gulp基础操作的一些实践练习,记录以防忘掉. 一,选择并输出文件:gulp.src(globs[,options]) eg:gulp.src('src/less/index.l ...

  2. Gulp基础

    1.什么是gulp? gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. 2.为什么使用gulp? gulp不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工 ...

  3. gulp基础使用总结

    gulp 安装 1 检测电脑有没有安装node 执行 $ node -v $ npm -v 如果没有安装的话,可以到https://nodejs.org/en/download/下载安装. 2 全局安 ...

  4. gulp 基础运用

    全局安装gulp $npm install --global gulp 作为项目的开发依赖安装 //--save-dev 开发依赖,储存在package.json的devDependencies中,如 ...

  5. Gulp基础知识

    首先,我们需要了解Gulp能做些什么? 编译 sass                                        sass是什么?(使CSS可以用编程的方式写,加快我们开发的速度) ...

  6. gulp基础使用及进阶

    提示:路径中不允许出现中文,否则scss编译会出错,大概. 按照惯例,先检查一下Node.js.npm(cnpm).gulp的版本号 1.新建package.json 我们可以通过手动新建这个配置文件 ...

  7. 【gulp】工作中的实战

    写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的 ...

  8. Gulp真实项目用例

    包括了less预编译,css压缩,html文件include引入,js混淆压缩,本地开发热刷新服务器,html压缩,版本号添加 github地址: gulpfile.js var gulp = req ...

  9. gulp学习-gulpfile

    安装gulp 假设已经安装了node 和npm (淘宝的cnpm很适合国内使用). 1.首页全局安装gulp. 1 npm install --global gulp 2.其次局部安装gulp.(注: ...

随机推荐

  1. idea 2018.1破解激活方法,有效期至2099年

    优点:有效期至2099年,不出意外,这辈子肯定够用了 缺点:稍微麻烦些,不过不要紧,为了以后省事,都值了 下面是具体的破解激活步骤: 1. 下载破解补丁文件,路径为:http://idea.lanyu ...

  2. C#水晶报表教程

    http://apps.hi.baidu.com/share/detail/24298108 水晶报表是一个功能强大的报表工具,现在已经被Microsoft Visual Studio 2005(下文 ...

  3. Flink 学习(一)

    摘自Flink官网https://flink.apache.org/ 最近看到公司有Flink平台,正好做过storm和spark streaming上的业务,借着这个机会把flink也学了.正好比较 ...

  4. 理解position定位

    使用css布局position非常重要,语法如下: position:static | relative | absolute | fixed | center | page | sticky 默认值 ...

  5. 【blog】MySQL中tinytext、text、mediumtext和longtext详解

    参考链接 http://www.cnblogs.com/pureEve/p/6015000.html

  6. 人人项目renren-security\git\renren-security的目录下的文件列表

    \.git\config; \.git\FETCH_HEAD; \.git\HEAD; \.git\index; \.git\logs\HEAD; \.git\logs\refs\heads\mast ...

  7. Django学习手册 - 创建Django工程项目以及APP

    前置步骤: 下载python,django 并且安装好 python 解释器以及django模块. 整体步骤阐述: 创建django工程项目 步骤一:进入安装的python目录 步骤二:输入创建工程的 ...

  8. Java对象的浅拷贝和深拷贝&&String类型的赋值

    Java中的数据类型分为基本数据类型和引用数据类型.对于这两种数据类型,在进行赋值操作.方法传参或返回值时,会有值传递和引用(地址)传递的差别. 浅拷贝(Shallow Copy): ①对于数据类型是 ...

  9. setInterval 传值设参数

    <script type="text/javascript" > window.onload=function(){ for(var i=1;i<3;i++){ ...

  10. Light oj 1018 - Brush (IV) 状态压缩

    题目大意: 给出n个点的坐标,求至少画多少掉直线才能连接所有点. 题目思路:状态压缩 首先经行预处理,求出所有状态下,那些点不在该状态内 以任意两点为端点求出这条直线的状态 枚举所有状态,找出不在当前 ...