当前位置:首页 > 博客 >Node.js > 正文

gulp搭建静态页面开发环境

时间:2019-01-18 14:02   作者:admin   点击:

为了我们开发静态页面更快,可以把一些重复的工作工程化

比如:css编译、雪碧图生成、代码压缩、html格式化、es6=>es5等


我只是做了一个简单的css编译和雪碧图其他的也可以实现

配置如下

// gulpfile.js
const gulp = require('gulp');
const connect = require('gulp-connect');
const watch = require('gulp-watch');
const notify = require('gulp-notify');
const spriter = require('gulp-css-spriter');
const stylus = require('gulp-stylus');
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('connect', function() {
  connect.server({
    host: '172.16.2.141',
    port: '8080',
    livereload: true
  });
});

//html
function task_html (path) {
	const name = path.match(/([a-zA-Z_-]+)\.(html)/)[1]
	gulp.src(path)
    .pipe(connect.reload()) //自动刷新
    .pipe(notify({
      message: name+'.html更新成功'
    })) //提醒任务完成
}

//stylus
function task_css(path) {
	const name = path.match(/([a-zA-Z_-]+)\.(styl|sass|scss|less)/)[1]
  	gulp.src(path)
		.pipe(stylus({
		  compress: false
		}))
		
		.pipe(gulp.dest('./assets/styles/'))
		.pipe(autoprefixer({
		    browsers: ['last 2 versions', '> 1%', 'not ie <= 8']
		}))
		.pipe(spriter({
        // 生成的spriter的位置
        spriteSheet: './assets/images/'+name+'/bg_sprite.png',
        spritesmithOptions: {

        },
        // 生成样式文件图片引用地址的路径
        // 如下将生产:backgound:url(../images/sprite20324232.png)
        pathToSpriteSheetFromCSS: '../images/'+name+'/bg_sprite.png',
        spriteSheetBuildCallback: function(err, result) {
          //console.log(result)
        }
	    }).on('error', function(err) {
        console.log('err',err)
      }))
	    .pipe(new cleanCSS({
	      format: 'keep-breaks' 
	    }))
	    .pipe(gulp.dest('./assets/styles/'))
	    .pipe(connect.reload()) //自动刷新
		.pipe(notify({
		  message: name+'.css编译成功'
		})) //提醒任务完成
}


// 不生成雪碧图注释
/* @meta {"spritesheet": {"include": false}} */


// 监听文件 前面不加./ 会监听新增文件
gulp.task('watch', function() {
  gulp.watch(['assets/*.html','assets/*/*.html'], function (options) {
  	task_html(options.path)
  });
  gulp.watch(['assets/styles/stylus/*.styl'], function (options){
  	task_css(options.path)
  });
});

gulp.task('default', ['connect', 'watch']);


项目用到的依赖:

// package.json
{
  "name": "server",
  "version": "1.0.0",
  "description": "静态页面开发环境",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.11",
    "express": "^4.16.3",
    "gulp": "^3.9.1",
    "gulp-connect": "^5.5.0",
    "gulp-notify": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack-cli": "^2.1.2"
  },
  "dependencies": {
    "gulp-autoprefixer": "^6.0.0",
    "gulp-clean-css": "^3.10.0",
    "gulp-css-spriter": "^0.4.0",
    "gulp-rename": "^1.4.0",
    "gulp-stylus": "^2.7.0",
    "gulp-watch": "^5.0.0",
    "html-loader": "^0.5.5",
    "htmllint-loader": "^2.1.4",
    "npm": "^6.0.0",
    "webpack": "^4.6.0",
    "webpack-dev-server": "^3.1.4"
  }
}


安装好依赖,直接运行gulp 就可以了 记得修改ip地址为自己的ip