1.初始化一个项目:npm init
2.安装gulp环境:npm install gulp --save-dev
packages.json内容如下:
{ "name": "front", "version": "1.0.0", "description": "xfz", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "力王", "license": "ISC", "devDependencies": { "browser-sync": "^2.26.3", "gulp-autoprefixer": "^6.0.0", "gulp-cache": "^1.1.1", "gulp-concat": "^2.6.1", "gulp-concat-folders": "^1.3.1", "gulp-connect": "^5.7.0", "gulp-cssnano": "^2.1.3", "gulp-imagemin": "^5.0.3", "gulp-rename": "^1.4.0", "gulp-sass": "^4.0.2", "gulp-uglify": "^3.0.1" } }
#然后npm install就会自动读取内容包下载
创建gulpfile.js(必须叫这个名字)
var gulp = require('gulp'); var cssnano = require('gulp-cssnano'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var concat = require('gulp-concat'); var cache = require('gulp-cache'); var imagemin = require('gulp-imagemin'); var bs = require('browser-sync').create(); var sass = require('gulp-sass'); var path = { 'html': './template/**/', 'css':'./src/css/', 'js':'./src/js/', 'image':'./src/image/', 'css_dist': './dist/css/', 'js_dist': './dist/js/', 'image_dist': './dist/image/', }; //定义压缩图片的任务 gulp.task('images',function () { gulp.src(path.image + '*.*') .pipe(rename({ 'suffix':'.min' })) .pipe(cache(imagemin())) .pipe(gulp.dest(path.image_dist)) .pipe(bs.stream()) }); //定义加载html的任务 gulp.task('html', function () { gulp.src(path.html + '*.html') .pipe(bs.stream()) }); //定义压缩css文件的任务 gulp.task('css', function () { gulp.src(path.css + '*.scss') .pipe(sass().on('error', sass.logError)) .pipe(cssnano()) .pipe(rename({ 'suffix':'.min' })) .pipe(gulp.dest(path.css_dist)) .pipe(bs.stream()) }); //定义压缩js文件的任务 gulp.task('js',function () { gulp.src(path.js + '*.js') .pipe(uglify()) .pipe(rename({ 'suffix':'.min' })) .pipe(gulp.dest(path.js_dist)) .pipe(bs.stream()) }); //定义监听css文件修改的任务 gulp.task('watch',function () { gulp.watch(path.css + '*.scss', ['css']); gulp.watch(path.js + '*.js', ['js']); gulp.watch(path.image + '*.*', ['images']); gulp.watch(path.html + '*.html', ['html']); }); //定义浏览器初始化的任务 gulp.task('bs', function () { bs.init({ 'server': { baseDir:'./' } }) }); //定义浏览器刷新任务 gulp.task('server',['bs', 'watch']);