入门指南
http://www.gulpjs.com.cn/
http://www.gulpjs.com.cn/docs/getting-started/
前端构建工具gulpjs的使用介绍及技巧
插件库
https://www.npmjs.com/search
http://gulpjs.com/plugins/
gulp-usemin : https://www.npmjs.com/package/gulp-usemin
gulp教程之gulp中文API
http://www.ydcss.com/archives/424
gulp详细入门教程
http://www.ydcss.com/archives/18
http://jingyan.baidu.com/article/14bd256e7f7d7fbb6d2612c4.html
gulp教程之gulp-imagemin:
http://www.ydcss.com/archives/26
深度壓縮圖片: http://fanli7.net/a/JAVAbiancheng/ANT/20160508/561425.html
gulp-imagemin github文档
Gulp使用指南
http://www.techug.com/gulp
gulp-htmlmin压缩html
http://www.jb51.net/article/85973.htm
var gulp = require('gulp'),
sass = require('gulp-sass'),
imagemin = require('gulp-imagemin');
/* 定义builtSass任务 */
gulp.task('builtSass', function () {
gulp.src(['static/**/*.scss']) /* 任务源文件 */
.pipe(sass()) /* 任务调用模块 */
.pipe(gulp.dest('static')); /* 任务目标文件导出目录 */
});
/* 定义watchSass任务 */
gulp.task('watchSass', function () {
return gulp.watch('static/**/*.scss',['builtSass']) /* 监听scss文件 */
});
gulp.task('testImagemin', function () {
gulp.src('static/**/*.{png,jpg,jpeg,gif,bmp,ico}')
.pipe(imagemin())
.pipe(gulp.dest('static'));
});
gulp.task('default',['builtSass','watchSass','testImagemin']);
红包项目的gulpfile.js
var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
htmlmin = require('gulp-htmlmin');
gulp.task('builtImagemin', function () {
gulp.src('develop/**/*.{png,jpg,jpeg,gif,bmp,ico}')
.pipe(imagemin({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
}))
.pipe(gulp.dest('master'));
});
gulp.task('builtHtmlmin', function () {
gulp.src('develop/**/*.html')
.pipe(htmlmin({
collapseWhitespace:true,
collapseBooleanAttributes:true,
removeComments:true,
removeEmptyAttributes:true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true,
minifyJS:true,
minifyCSS:true
}))
.pipe(gulp.dest('master'));
});
gulp.task('default',['builtImagemin','builtHtmlmin']);
/**
* Created by yetao on 2017/6/7.
*
*/
var gulp = require('gulp'),
sass = require('gulp-sass');
rubySass = require('gulp-ruby-sass');
var _project = "July88Sass";
var _projectPath = "July88";
module.exports.name = _project;
module.exports.func = function(){
var sourcePath = _projectPath+'/',
targetPath = '../../master/app/'+_projectPath+'/';
//gulp-ruby-sass
gulp.task('builtRubySass', () =>
rubySass(sourcePath+'css/*.scss')
.on('error', sass.logError)
.pipe(gulp.dest(sourcePath+'css/'))
);
//gulp-sass
gulp.task('builtSass', function () {
gulp.src([sourcePath+'css/*.scss']) /* 任务源文件 */
.pipe(sass()) /* 任务调用模块 */
.pipe(gulp.dest(sourcePath+'css/')); /* 任务目标文件导出目录 */
});
gulp.task('watchSass', function () {
gulp.watch(sourcePath+'css/*.scss',['builtRubySass']) /* 监听scss文件 */
}());
console.log('watching');
return ;
}
module.exports.op = function () {
gulp.task(_project, this.func);
}
安装已有项目
cnpm install