npm+gulp搭建前端项目

npm+gulp搭建前端项目

---

1. 对应的网站下载git和nodejs并安装；
2. 在本地建立文件夹，并打开；
3. 打开软件Git Bash Here(当安装git之后，进入一个文件夹右键即可出现)；
4. 输入git init指令并回车，此时出现一个以git结尾的文件夹；
5. 输入npm init --y指令并回车，此指令会建立一个package.json的文件；
6. 输入npm install 框架名 --save`，此指令是下载对应的框架名(–save是为了将框架保存在package.json中，否则为全局安装)
7. 输入npm install gulp --save-dev，安装gulp，管理代码
8. 然后再本地建立gulpfile.js文件，使用require引入对应的插件

var gulp = require('gulp')

  8.1.gulp.task(任务名，[依赖的任务]，fn)是建立一个任务；
  8.2.gulp.src(文件的相对路径)是文件的输入；
  8.3.gulp.dest(文件相对路径)是文件的输出(如果没有找到对应的文件夹则会新建一个对应的文件夹)；
  8.4.gulp.watch(相对路径，[依赖任务])是监听相对路径的文件是否有变化；
  8.5.gulp的四个API之后都会返回一个Vinyl files 的 stream 它可以被 piped 到别的插件中，例如：
  gulp.task('js',function(){
    return gulp.src(dist.js)
        .pipe(gulpuglify())
        .pipe(gulpConcat('all.min.js'))
        .pipe(gulp.dest('dist/'));
});
   8.6.gulp的常用插件(使用插件之前首先使用npm将插件安装)
	8.6.1.gulp-sass是将编译sass文件为css文件(因为文件被墙，无法安装)，使用方法：
	    var gulpsass = require('gulp-sass');
	    gulp.task('sass',function(){
	        return gulp.src(dist.scss)//
	            .pipe(gulpsass.sync())
	            .pipe(gulp.dest('src'));
	    });
	8.6.2.gulp-uglify是压缩js文件，gulp-concat是连接js文件，使用方法：
	    var gulpuglify = require('gulp-uglify'),
		    gulpConcat = require('gulp-concat');
	    gulp.task('js',function(){
	        return gulp.src(dist.js)
	            .pipe(gulpuglify())
	            .pipe(gulpConcat('all.min.js'))
	            .pipe(gulp.dest('dist/'));
	    });
	8.6.3.gulp-html-replace替换html的引入外部文件，使用方法：
		var gulpHtmlRelpace = require('gulp-html-replace');
	    gulp.task('htmlReplace',function(){
	        return gulp.src('src/index.html')
	            .pipe(gulpHtmlRelpace({
	                'css': 'style.min.css',
	                'js': 'all.min.js'
	            }))
	            .pipe(gulp.dest('dist/'));
	    });
	8.6.4.browser-sync是一个浏览器自动刷新工具,使用方法：
		gulp.task('browserSnyc',['css-watch'],function(){
	        return browserSnyc({
	            server:{
	                baseDir:'src'
	                //是文件入口文件夹，在src下找index.html
	            }
	        })
	    });

9. 运行gulpfile.js里的代码，在"script"里面写"name"：“gulp 任务名”，例如：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp-sass": "gulp sass",
    "start": "http-server -a localhost -p 8001 -o",
    "browserSnyc": "gulp browserSnyc",
    "dist": "gulp dist"
  }

运行时在控制台输入npm run name,回车即可。