首页 > 代码库 > gulp教程（sass，livereload，md5，css压缩，js压缩，img的base64）
gulp教程（sass，livereload，md5，css压缩，js压缩，img的base64）
环境
node -v v6.10.3
npm -v 3.10.10
package.json如下：
{ "name": "zhcsdata", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "zengwe", "license": "ISC", "devDependencies": { "gulp": "^3.9.1", "gulp-base64": "^0.1.3", "gulp-file-include": "^1.1.0", "gulp-jshint": "^2.0.4", "gulp-livereload": "^3.8.1", "gulp-minify-css": "^1.2.4", "gulp-rev": "^7.1.2", "gulp-rev-append": "^0.1.8", "gulp-sass": "^2.3.2", "gulp-sourcemaps": "^2.6.0", "gulp-uglify": "^3.0.0", "gulp-url-replace": "^1.0.2", "jshint": "^2.9.5", "node-gyp": "^3.6.2" }}文件目录结构：
gulpfile.js如下：
var gulp = require(‘gulp‘); var sass = require(‘gulp-sass‘);var fileinclude = require(‘gulp-file-include‘);var livereload = require(‘gulp-livereload‘);var rev = require(‘gulp-rev-append‘);var replace = require(‘gulp-url-replace‘);var cssmin = require(‘gulp-minify-css‘);var uglify = require(‘gulp-uglify‘);var base64func =require("gulp-base64");var base64= { //src: __dirname + ‘css/*.css‘, //dest: __dirname + ‘/css‘, options: { //baseDir: __dirname, extensions: [‘png‘], maxImageSize: 20 * 1024, // bytes // debug: false }}gulp.task(‘sass‘, function() { gulp.src([‘./static_temp/sass/*.scss‘,"./static_temp/sass/*/*.scss"]) .pipe(sass()) .on(‘error‘, function(err) { gutil.log(‘scss Error!‘, err.message); this.end(); }) .pipe(cssmin()) .pipe(base64func(base64)) .pipe(gulp.dest(‘./static/css‘));});gulp.task(‘js‘, function() { gulp.src([‘./static_temp/js/*.js‘,"./static_temp/js/*/*.js"]) .pipe(uglify({ mangle: true })) .pipe(gulp.dest(‘./static/js/‘));});gulp.task(‘html‘, function() { gulp.src([‘./view_temp/*.html‘,‘./view_temp/html/*.html‘]) .pipe(fileinclude({ prefix: ‘@@‘, basepath: ‘@file‘ })) .on(‘error‘, function(err) { gutil.log(‘html Error!‘, err.message); this.end(); }) .pipe(replace({"../static/":"F:/golang/code/src/zhcsdata/static/"})) .pipe(rev()) .pipe(replace({"F:/golang/code/src/zhcsdata/static/":"../static/"})) .pipe(gulp.dest(‘./view‘),{base:"."});});gulp.task("reload",function(event){ livereload.listen(); });gulp.task(‘default‘, function(){ gulp.run(‘html‘,"reload",‘js‘); gulp.watch(["./view_temp/html/*.html","./view_temp/html/*/*.html","./view_temp/common/*.html"],function(event){ console.log("common html changed"); gulp.run("html"); }); gulp.watch([‘./static_temp/sass/*.scss‘,‘./static_temp/sass/*/*.scss‘],function(){ gulp.run("sass"); }); gulp.watch(["./view/*.html","./view/*/*.html","./static/css/*.css","./static/css/*/*.css"],function(event){ console.log("file changed ,reload"); livereload.changed(event.path); gulp.run("reload"); })});index.html
<link rel="stylesheet" href="http://www.mamicode.com/static/css/index.css?rev=@@hash">@@include(‘../common/header.html‘,{"name":"这是在header中的变量"})<div class="demo"> gulp demo zengwe!!!ss <div class="child">child</div></div>index.scss如下：
.demo{ color:red; .child{ color:black; font-size:24px; background: url("/static/img/logo_g.png"); }}header.html 如下：
<meta charset="utf-8"><h1> 这个是头部文件ssd</h1><h2>@@name</h2>
其余的是无关文件或者是生成的文件，js的内容没必要贴出，反正只是压缩而已
ps:目前存在一个问题，当新增文件是watch对新增文件无效，删除文件时过去生成的文件需手动删除
代码：github
gulp教程（sass，livereload，md5，css压缩，js压缩，img的base64）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。