gulp记录
npm install gulp -g //全局安装gulp
gulp -v //此处若有问题,配置环境变量,npm config get prefix得到路径
npm init //新建nodejs项目配置文件package.json,其中项目name、version、description为必填项
package.json
{
"name": "project",
"version": "1.0.0",
"description": "this is a test",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.14.0",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-cache": "^0.4.5",
"gulp-clean-css": "^2.0.12",
"gulp-if": "^2.0.1",
"gulp-imagemin": "^3.0.3",
"gulp-less": "^3.1.0",
"gulp-minify-css": "^1.2.4",
"gulp-sass": "^2.3.2",
"gulp-uglify": "^2.0.0",
"gulp-useref": "^3.1.0",
"run-sequence": "^1.2.2"
}
}
npm install gulp --save-dev //当前项目安装gulp,--save将保存配置信息至package.json,-dev保存至package.json的devDependencies节点
npm install gulp-sass --save-dev //安装gulp-sass等等
配置gulpfile.js,这里的名字要和package.json的main指定的js文件对应起来
var gulp = require('gulp');//告知node去node_modules中查找gulp包,先局部查找,找不到就全局查找,找到赋予gulp变量我们就可以使用啦
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cleanCSS = require('gulp-clean-css');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence'); gulp.task('task-name',function(){//task-name是给你任务起的名字,稍后运行gulp task-name将会执行后面的函数
console.log('Hello World');
}); gulp.task('sass', function(){
return gulp.src('src/sass/**/*.scss')//Gets all files ending with .scss in src/sass and children dirs
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('src/sass-css'))//在执行命令之后将生成对应的css文件存放到相应路径,新添文件目录后重新编译下即可
.pipe(browserSync.reload({//每次css文件更改都刷新一下浏览器
stream: true
}))
});
//创建一个broswerSync任务,我们需要告知它,根目录在哪里
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'src'
}
})
}) //gulp.watch('src/sass/**/*.scss',['sass']); //通常我们监听的还不只是一个文件,把它变成一个任务:
// gulp.task('watch', function(){
// gulp.watch('src/sass/**/*.scss', ['sass']);
// // Other watchers
// }) //在watch任务之前告知Gulp,先把browserSync和Sass任务执行了再说
gulp.task('watch',['browserSync','sass'],function(){
gulp.watch('src/sass/**/*.scss', ['sass']);
// Other watchers
gulp.watch('src/**/*.html',browserSync.reload);//这些目录动了也刷新
gulp.watch('src/**/*.js',browserSync.reload);
}) // gulp.task('useref',function(){//合并
// return gulp.src('src/*.html')
// .pipe(useref())
// .pipe(gulp.dest('dist'));
// }); // 合并并压缩js
gulp.task('useref', function(){
return gulp.src('src/*.html')
.pipe(useref())//顺序!!
.pipe(gulpIf('*.js', uglify())) // Uglifies Javascript files
.pipe(gulp.dest('dist'));
});
// 压缩css
gulp.task('minify-css', function() {
return gulp.src('src/**/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist'));
}); gulp.task('images', function(){
return gulp.src('src/images/**/*.+(png|jpg|gif|svg)')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
}); gulp.task('images', function() {
return gulp.src('src/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'))
}); // gulp.task('clean', function() {
// del('dist');
// }); gulp.task('clean:dist', function(callback){
return del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
}); // gulp.task('clean', function() {
// del('dist');
// }); gulp.task('clean', function(callback) {
del('dist');
return cache.clearAll(callback);
}) gulp.task('default', function (callback) {
runSequence(['sass','browserSync', 'watch'],
callback
)
}); gulp.task('build', function(callback) {
runSequence(
'clean:dist',
'sass',
['useref', 'images','minify-css'],
callback
)
})
gulp记录的更多相关文章
- 前端自动化构建工具gulp记录
一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- (转载)前端构建工具gulp使用
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...
- 前端构建工具gulp
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...
- 前端构建工具gulp使用 (转)
http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
- 小身材大用途,用PrimusUI驾驭你的页面
“PrimusUI”是自己在借鉴了如今网上很多开源的UI库,再经过自己整理加工的一个简单代码集合. 每个功能块的CSS代码都很少,力求简单易懂,低门槛,代码可根据自己实际情况轻易修改,改到符合自己场景 ...
- 用CSS3动画,让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- PrimusUI
小身材大用途,用PrimusUI驾驭你的页面 “PrimusUI”是自己在借鉴了如今网上很多开源的UI库,再经过自己整理加工的一个简单代码集合. 每个功能块的CSS代码都很少,力求简单易懂,低门槛,代 ...
随机推荐
- HttpWebRequest用法实例
[HttpPost] public ActionResult Setmobile() { string text = "<?xml version='1.0' encoding='UT ...
- Java 使用StringBuffer注意
Stringbuffer使用注意 问题背景: 模拟客户端使用Socket请求服务器核心系统,核心系统正常响应,内容较大,近2715KB,大于2.6M多. 使用指定编码GBK来接收响应内容到过程中没 ...
- 【阿里云】Windows2008 FTP配置指南
云服务器默认使用Windws 2008 IIS 中自带的FTP服务器. 1.添加FTP帐号 A. 选择[服务管理器]--[配置]--[本地用户和组]--[用户]:在空白处右键选择[新用户] ...
- IDEA------Error:java:无效的目标发行版:1/7
© 版权声明:本文为博主原创文章,转载请注明出处 使用IDEA发布java web项目时,报错.报错信息如下: 解决方案: 方案一:File-->Settings-->Build,Exec ...
- Android中经常使用的bitmap处理方法
收集了非常多bitmap相关的处理方法,差点儿所有应用在项目中,所以特记录下! package com.tmacsky.utils; import java.io.ByteArrayOutputStr ...
- ubuntu16.04--在标题栏显示网速
有时感觉网络失去响应,就通过Ubuntu 14.04自带的系统监视器程序来查看当前网速,但是这样很不方便,遂打算让网速显示在标题栏,那样就随时可直观的看到.一番搜索尝试后,成功实现!同时也实现了CPU ...
- pjax简单实例
ajax缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中.pjax就不一样了,pjax被解释成ajax+pushState的封装,因为它把ajax的请求写入历史记录,并反映在地址栏, ...
- MySQL CREATE TRIGGER (1)
CREATE TRIGGER语法 CREATE TRIGGER trigger_name trigger_time trigger_event ON tbl_name FOR EACH ROW ...
- 软件测试人员需要精通的开发语言(5)--- Python
Python语言,也算是后起之秀,多平台的应用也让它成为万能的脚本语言,应用于各种架构各种工具,得到广泛应用.而且如今比较火热的行业,软件爬虫,多半是用Python开发的.因为Python是一种开放源 ...
- JAVA Socket基础(简单实现)
学习Socket需要了解的几个概念: Socket 指的是互联网连接中的各个终结点.互联网连接是怎么创建的,通过IP地址加端口号,进行互通. A电脑(192.168.3.125:80)>> ...