npm+gulp搭建前端项目

npm+gulp搭建前端项目

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

8.1.gulp.task(任务名，[依赖的任务]，fn)是建立一个任务；

8.2.gulp.src(文件的相对路径)是文件的输入；

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
            }
        })

1. 运行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,回车即可。