内容简介:全局安装 gulp:作为项目的开发依赖(devDependencies)安装:在项目根目录下创建一个名为 gulpfile.js 的文件:
全局安装 gulp:
$ npm install --global gulp
作为项目的开发依赖(devDependencies)安装:
$ npm install --save-dev gulp
在项目根目录下创建一个名为 gulpfile.js 的文件:
var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 });
运行 gulp
$ gulp //默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
至此,一个简单的gulp已经完成,接下来让我们来完善部分功能
gulp功能完善
生成package.json文件
$ npm init //一直回车,有需要的可以设置
安装所需包
使用淘宝镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org 示例 $ cnpm install [name]
接着
$ cnpm i browser-sync gulp gulp-clean-css gulp-imagemin gulp-rename gulp-sass gulp-uglify gulp.spritesmith gulp-autoprefixer --save
新建gulpfile.js文件
添加
var gulp = require('gulp'); var browserSync = require('browser-sync').create(); //通过流的方式创建任务流程, 这样您就可以在您的任务完成后调用reload,所有的浏览器将被告知的变化并实时更新 var sass = require('gulp-sass'); //sass转css var reload = browserSync.reload; var minifyCSS = require('gulp-clean-css') //css压缩 var uglify = require('gulp-uglify') //js压缩 var imagemin = require('gulp-imagemin') //图片压缩 var rename = require('gulp-rename') //文件重命名 var autoprefixer = require('gulp-autoprefixer') //自动添加前缀
设置默认文件地址
code为文件夹,里面存放html css js文件 var src = { scss: 'code/scss/*.scss', css: 'code/css/*.css', html: 'code/*.html', js: 'code/js/*.js', images: 'code/images/*.{png,jpg,gif,ico}' };
gulp.task(name[, deps], fn)
name: 任务的名字 deps: 一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。 fn: 该函数定义任务所要执行的一些操作。通常来说,它会是这种形式:gulp.src().pipe(someplugin())。 // 静态服务器 + 监听 scss/html 文件 gulp.task('serve', ['sass'], function() { browserSync.init({ server: "./code" }); gulp.watch(src.scss, ['sass']); gulp.watch(src.css, ['css']); gulp.watch(src.images, ['images']) gulp.watch(src.js, ['js-watch']); gulp.watch(src.js, ['js']); gulp.watch(src.html).on('change', reload); });
scss编译后的css将注入到浏览器里实现更新
gulp.task('sass', function() { return gulp.src(src.scss) .pipe(sass()) .pipe(minifyCSS({ advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)] compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式] keepBreaks: true,//类型:Boolean 默认:false [是否保留换行] keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀 })) .pipe(autoprefixer()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest("code/css")) .pipe(reload({stream: true})); });
雪碧图(有需要可以尝试)
var spritesmith = require('gulp.spritesmith'); gulp.task('sprite', function () { return gulp.src('code/images/*.png') .pipe(spritesmith({ imgName:'images/sprite20161010.png', //保存合并后图片的地址 cssName:'css/sprite.css', //保存合并后对于css样式的地址 padding:20, algorithm:'binary-tree', })) .pipe(gulp.dest('code/scss')); });
监听css文件
gulp.task('css', function() { return gulp.src(src.css) .pipe(minifyCSS()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest("code/css")) .pipe(reload({stream: true})); });
监听js文件
gulp.task('js', function() { // 1. 找到文件 return gulp.src(src.js) //2. 压缩文件 .pipe(uglify()) .pipe(rename({suffix: '.min'})) //3. 另存压缩后的文件 .pipe(gulp.dest('code/dest')) .pipe(reload({stream: true})); }) //监听js文件变化实现热加载 gulp.task('js-watch', ['js'], browserSync.reload);
压缩图片任务
// 在命令行输入 gulp images 启动此任务 gulp.task('images', function () { // 1. 找到图片 gulp.src(src.images) // 2. 压缩图片 .pipe($.imagemin()) // 3. 另存图片 .pipe(gulp.dest('images')) .pipe(reload({stream: true})); });
最后控制台输入gulp执行
gulp.task('default', ['serve']);
如果觉得帮助到了你,欢迎star -> https://github.com/wclimb/wclimb.github.io
完整代码
文件目录
-code -imgage 1.png -css default.css -scss default.scss -js default.js index.html gulpfile.js package.json
package.json
{ "name": "gulp-test", "version": "1.0.0", "description": "Gulp & SASS", "main": "gulpfile.js", "scripts": { "start": "gulp" }, "author": "", "license": "ISC", "devDependencies": { "browser-sync": "^2.2.0", "gulp": "^3.9.1", "gulp-clean-css": "^3.0.3", "gulp-imagemin": "^3.1.1", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglify": "^2.0.1", "gulp.spritesmith": "^6.4.0", "gulp-autoprefixer": "^4.0.0" }, "dependencies": { } }
gulpfile.js
var gulp = require('gulp'); var browserSync = require('browser-sync').create(); //通过流的方式创建任务流程, 这样您就可以在您的任务完成后调用reload,所有的浏览器将被告知的变化并实时更新 var sass = require('gulp-sass'); //sass转css var reload = browserSync.reload; var minifyCSS = require('gulp-clean-css') //css压缩 var uglify = require('gulp-uglify') //js压缩 var imagemin = require('gulp-imagemin') //图片压缩 var rename = require('gulp-rename') //文件重命名 var autoprefixer = require('gulp-autoprefixer') //自动添加前缀 var src = { scss: 'code/scss/*.scss', css: 'code/css/*.css', html: 'code/*.html', js: 'code/js/*.js', images: 'code/images/*.{png,jpg,gif,ico}' }; // 静态服务器 + 监听 scss/html 文件 gulp.task('serve', ['sass'], function() { browserSync.init({ server: "./code" }); gulp.watch(src.scss, ['sass']); gulp.watch(src.css, ['css']); gulp.watch(src.images, ['images']) gulp.watch(src.js, ['js-watch']); gulp.watch(src.js, ['js']); gulp.watch(src.html).on('change', reload); }); // scss编译后的css将注入到浏览器里实现更新 gulp.task('sass', function() { return gulp.src(src.scss) .pipe(sass()) .pipe(minifyCSS({ advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)] compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式] keepBreaks: true,//类型:Boolean 默认:false [是否保留换行] keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀 })) .pipe(autoprefixer()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest("code/css")) //重新输出数据到某个文件夹,如果没有就会自动创建 .pipe(reload({stream: true})); }); // 雪碧图(有需要可以尝试) //var spritesmith = require('gulp.spritesmith'); // gulp.task('sprite', function () { // return gulp.src('code/images/*.png') // .pipe(spritesmith({ // imgName:'images/sprite20161010.png', //保存合并后图片的地址 // cssName:'css/sprite.css', //保存合并后对于css样式的地址 // padding:20, // algorithm:'binary-tree', // })) // .pipe(gulp.dest('code/scss')); // }); gulp.task('css', function() { return gulp.src(src.css) .pipe(minifyCSS()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest("code/css")) .pipe(reload({stream: true})); }); gulp.task('js', function() { // 1. 找到文件 return gulp.src(src.js) //2. 压缩文件 .pipe(uglify()) .pipe(rename({suffix: '.min'})) //3. 另存压缩后的文件 .pipe(gulp.dest('code/dest')) .pipe(reload({stream: true})); }) //监听js文件变化实现热加载 gulp.task('js-watch', ['js'], browserSync.reload); // 压缩图片任务 // 在命令行输入 gulp images 启动此任务 gulp.task('images', function () { // 1. 找到图片 gulp.src(src.images) // 2. 压缩图片 .pipe($.imagemin()) // 3. 另存图片 .pipe(gulp.dest('images')) .pipe(reload({stream: true})); }); gulp.task('default', ['serve']);
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
算法心得:高效算法的奥秘(原书第2版)
(美)Henry S. Warren, Jr. / 爱飞翔 / 机械工业出版社 / 2014-3 / 89.00
【编辑推荐】 由在IBM工作50余年的资深计算机专家撰写,Amazon全五星评价,算法领域最有影响力的著作之一 Google公司首席架构师、Jolt大奖得主Hoshua Bloch和Emacs合作创始人、C语言畅销书作者Guy Steele倾情推荐 算法的艺术和数学的智慧在本书中得到了完美体现,书中总结了大量高效、优雅和奇妙的算法,并从数学角度剖析了其背后的原理 【读者评价......一起来看看 《算法心得:高效算法的奥秘(原书第2版)》 这本书的介绍吧!
RGB CMYK 转换工具
RGB CMYK 互转工具
HEX CMYK 转换工具
HEX CMYK 互转工具