Lizc博客

gulp快速入门

发表于2018-05-31 15:02:24分类于前端0条评论阅读次数286

5步上手gulp

  1. 安装nodejs
  2. 全局安装gulp
  3. 项目安装gulp以及gulp插件
  4. 配置gulpfile.js
  5. 运行任务

实践见真知

  • 安装nodejs

    1. gulp基于nodejs
    2. 安装:打开nodejs官网,选择nodejs版本,点击download。(安装路径自定)
  • 全局安装gulp

    npm install gulp -g

说明:

  1. 全局安装gulp目的是为了通过她执行gulp任务;
  2. 查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。

项目安装gulp以及gulp插件

  1. 新建一个文件夹,用命令行进入该文件夹
  2. 执行 npm init ,用于初始化文件夹
  3. 新建gulpfile.js文件
  4. 安装插件,更多插件可以看这里gulpjs.com/plugins/

示例安装:比如安装插件:sass的编译(gulp-sass)

命令:npm install gulp-sass --save-dec

配置gulpfile.js

	var gulp = require('gulp'),
	    sass = require('gulp-sass');//加载插件
	// sass任务
	gulp.task('sass', function() {
	    //编译sass
	    return gulp.src('./styles/main.scss')
	    .pipe(sass())
	    //添加前缀
	    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
	    //保存未压缩文件到我们指定的目录下面
	    .pipe(gulp.dest('dist'))
	    //提醒任务完成
	    .pipe(notify({ message: 'sass task complete' }));
	});
	gulp.task('default', function() {
		gulp.run('sass');
	    gulp.watch('./styles/*.scss', function() {//监听文件变化
	        gulp.run('sass');
	    });
	});

运行任务

  1. 可以运行单独的任务,例如: gulp default
  2. 运行整个任务,直接执行:gulp

--发表评论--

电子邮件地址不会被公开。必填项已用*标注