gulp完毕前端自动化,LiveReload与VisualStudio完美组合

2019-10-01 14:35 来源:未知

本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址

gulp是基于node的前端工具,可以对代码压缩,自动刷新页面,编译各种预处理器,给css加浏览器前缀,加版本号,自动打包都很方便,实现的前端代码的自动化处理。

写在前面

开始我们要装node.js,这个没什么可说的,自行百度,安装完成之后在命令行里面输入下面两个命令,如果输出了版本号的话(请忽视前面的符号,这是cmder自带的,win下很好用的命令行终端),OK那么恭喜你安装成功了

大家好我是博客园的蜗牛,博客园的蜗牛就是我。学习这篇文章,你不需要任何nodejs基础,当然你有的话就更顺利了。园子里有很多全栈或者是前端后台数据库都有需要你发光发热的人。也许你很喜欢做着这样的事儿,也许你不喜欢但是难以逃脱这样的安排。但是,无论你是前端,还是后端,还是全栈,好的工具和方法总是很重要的。当你在VS里写前端页面时,一遍又一遍的刷新浏览器给你带来的不仅仅是烦恼,长此以往更是时间的浪费。今天分享的就能完全帮助你解决这样的问题——基于nodejs的Gulp LiveReload与VisualStudio完美结合。希望本篇文章,能带给辛苦需要进行前端工作的人一点方便。

<pre>

 

λ node -v

直入主题

v6.7.0

gulp读音【galp】,基于nodejs,所以这个环境是必要的,如果你没安装,那就去官网或者百度下载安装包并按照教程安装上就好了。我直接进入正题:耐心点,十步完成

λ npm -v

1.全局安装 gulp:

3.10.3

  npm install --global gulp

</pre>

2.作为项目的开发依赖(devDependencies)安装:

安装好了Node环境后,接下来你应该通过npm来安装Gulp了,-g 代表的是全局安装,这样你到时候再任何目录下都可以跑gulp命令

  npm install gulp gulp-livereload --save-dev 命令来安装livereload

λ  npm install gulp -g

3.使用命令来查看你已经安装的npm包

将命令行终端定位到项目文件,执行npm init,创建一个package.json文件,这样方便以后你的项目如果别人也用的话,那么那个人只要 npm/cnpm install 一下,所有依赖的插件都安装了,你不需要拷贝给他。

   npm list -g -depth 0,如果你看到下面两项,恭喜你安装成功。

先前gulp安装是在全局环境下,现在还要将gulp的安装在你项目目录下,-D意思是你安装的包会出现在你开发(dev)的依赖(Dependencies)里

图片 1

λ  npm install gulp -D

   图片 2

这是我的package.json:

图片 3

{
  "name": "xsj",
  "version": "1.0.0",
  "description": "Daren Official website",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "zk",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "2.10.0",
    "browsersync-ssi": "0.2.4",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cache": "^0.4.6",
    "gulp-clean": "^0.3.2",
    "gulp-imagemin": "^3.2.0",
    "gulp-jade": "^1.1.0",
    "gulp-minify": "0.0.5",
    "gulp-plumber": "^1.0.1",
    "gulp-run-sequence": "^0.3.2",
    "gulp-sass": "2.1.0",
    "gulp-zip": "^3.0.2"
  }
}

图片 4

接着你在根目录下新建一个名叫gulpfile.js的js文件,我们关于gulp的配置都会写在这个文件里。我们可以写段代码测试下成功没有。

图片 5

var gulp = require('gulp'); 
gulp.task('test',function(){ 
console.log('gulp 测试成功了!')
 })

图片 6

在命令行运行 gulp test 回车 如果看到了控制台输出了那句话,OK,你的gulp的测试成功。
这是我的gulp配置,大家参考下,明天详解。

4.接下来到VS中创建你的MVC项目,自己动手写个demo。

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    SSI = require('browsersync-ssi'),
    minify = require('gulp-minify'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache'),
    plumber = require('gulp-plumber'),
    sass = require('gulp-sass'),
    autoprefixer=require('gulp-autoprefixer')
    jade = require('gulp-jade'),
    clean = require('gulp-clean'),
    runSequence = require('gulp-run-sequence'),
    zip = require('gulp-zip');

//监听资源变动,自动刷新页面
gulp.task('serve', function () {
  browserSync.init({
    server: {
      baseDir: ["./dist"],
      middleware: SSI({
        baseDir: './dist',
        ext: '.shtml',
        version: '2.10.0'
      })
    }
  });

  gulp.watch("app/scss/**/*.scss", ['sass']);
  gulp.watch("app/js/**/*.js", ['js']);
  gulp.watch("app/jade/*.jade", ['jade']);
  gulp.watch("app/lib/*.js", ['lib']);
  gulp.watch('app/img/*.{jpg,png,gif}', ['imgmin']);
  gulp.watch("dist/**/*.html").on("change", browserSync.reload);
});
//编译sass,压缩,加浏览器前缀
gulp.task('sass', function () {
  return gulp.src("app/scss/**/*.scss")
    .pipe(plumber())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sass({ outputStyle: "compressed" }))
    .pipe(autoprefixer({
            browsers: ['last 2 versions'],
        }))
    .pipe(gulp.dest("dist/css"))
    .pipe(browserSync.stream());
});
//压缩js(生成2种版本)
gulp.task('js', function () {
  return gulp.src('app/js/**/*.js')
    .pipe(plumber())
    .pipe(minify())
    .pipe(gulp.dest("dist/js"))
    .pipe(browserSync.stream());
});

//编译jade
gulp.task('jade', function () {
  return gulp.src("app/jade/**/*.jade")
    .pipe(plumber())
    .pipe(jade())
    .pipe(gulp.dest("dist/"))
    .pipe(browserSync.stream());
});
//搬运插件
gulp.task('lib', function () {
  return gulp.src('app/lib/*.js')
    .pipe(plumber())
    .pipe(gulp.dest("dist/lib"))
});
//仅压缩未缓存图片
gulp.task('imgmin', function () {
  return gulp.src('app/img/*.{jpg,png,gif}')
    .pipe(plumber())
    .pipe(cache(imagemin({
            optimizationLevel: 3,
            interlaced: true,
            progressive: true
    })))
    .pipe(gulp.dest('dist/img'))
})
//生成生产版本压缩包
gulp.task('publish', function () {
  return gulp.src('dist/**/*')
    .pipe(plumber())
    .pipe(zip('publish.zip'))
    .pipe(gulp.dest('release'))
});
//重构dist文件
gulp.task('redist', function () {
  //先运行clean,然后并行运行html,js,sass等
  runSequence('clean', ['html', 'jade', 'js', 'sass', 'lib', 'imgmin']);
});

gulp.task('clean', function () {
  return gulp.src('dist/*', { read: false })
    .pipe(clean());
});

gulp.task('default', ['html', 'serve'])

  图片 7

放两张图大家理解下

图片 8

图片 9

5.好了,现在一个新的MVC项目已经创建完成,并且我添加了TestController,并且有一个Index的View.并且现在View中除了html框架,什么也没有,也不需要引用什么。你唯一要做的就是在Views目录中添加一个我们的配置文件内容如下:

gulp-p1.png

var gulp = require('gulp');

var livereload = require('gulp-livereload'), // 网页自动刷新(服务器控制客户端同步刷新)
    webserver = require('gulp-webserver'); // 本地服务器

// 注册任务
gulp.task('webserver', function () {
    gulp.src('./') // 服务器目录(./代表根目录)
    .pipe(webserver({ // 运行gulp-webserver
        livereload: true, // 启用LiveReload
        open: true // 服务器启动时自动打开网页
    }));
});

// 监听任务
gulp.task('watch', function () {
    gulp.watch('./**/**/*.cshtml', function (file) {  //该站点根目录
        livereload.changed(file.path);
        console.log("sss");
    });

});

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

图片 10

  很好,现在在你的VS中配置完成。

gulp-p2.png

TAG标签:
版权声明:本文由金沙澳门官网4166发布于文物考古,转载请注明出处:gulp完毕前端自动化,LiveReload与VisualStudio完美组合