前端构建工具gulp入门教程 sass编译 js查错.docx

前端构建工具gulp入门教程 sass编译 js查错，css js压缩合并这次是一个完整的gulp环境，sass编译，css js压缩合并 自动刷新等安装node、 安装gulp、打开到项目文件夹、略安装依赖npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename gulp-minify-css browser-sync -save-dev如果有 package.json 可以直接 npm install 安装gulp-jshint 检查JSgulp-sass sass编译gulp-concat 整合文件gulp-uglify 压缩javascriptgulp-rename 重命名gulp-minify-css 压缩CSSgulp-image 压缩图片var imagemin = require(gulp-imagemin);var imgSrc = source/images/*;var imgDest = dist/pages/images;/压缩图片gulp.task(imgmin,function() gulp.src(imgSrc) .pipe(imagemin() .pipe(gulp.dest(imgDest););gulp-htmlmin 压缩html使用tipsgulp.src(htmlSrc) .pipe(htmlmin(collapseWhitespace: true) /设置是够压缩html文件 true.pipe(gulp.dest(htmlDest);/htmlmin参数 removeComments: true,/清除HTML注释 collapseWhitespace: true,/压缩HTML collapseBooleanAttributes: true,/省略布尔属性的值 = removeEmptyAttributes: true,/删除所有空格作属性值 = removeScriptTypeAttributes: true,/删除的type=text/javascript removeStyleLinkTypeAttributes: true,/删除和的type=text/css minifyJS: true,/压缩页面JS minifyCSS: true/压缩页面CSSbrowser-sync 浏览器同步 自动刷新 会启动一个小型服务器来打开网站 官网初始化服务器文件夹browserSync.init( server: baseDir: dist/pages );/执行刷新方法browserSync.reload();待补充为了避免我们每次都需要安装这么多插件，可以使用package.json在目录中 npm init 直接新建package.json也可以自己新建文件name 名字可以自取，我们安装完那么伛插件以后，会出现以下这么多的插件列表 name: app, version: 0.0.1, description: , main: gulpfile.js, dependencies: browser-sync: 2.13.0, gulp-concat: 2.6.0, gulp-jshint: 2.0.1, gulp-minify-css: 1.2.4, gulp-rename: 1.2.2, gulp-uglify: 2.0.0, gulp-ruby-sass: 2.0.6, gulp-watch: 4.3.8, gulp: 3.9.1, jshint: 2.9.3, gulp-sass: 2.3.2 gulp必知 前端构建工具gulp入门教程gulp.run 运行函数gulp.task 命名函数gulp-watch 监视gulp.src 读取文件gulp.dest 输出文件文件目录：/引入gulpvar gulp = require(gulp);/引入组件var jshint = require(gulp-jshint);var sass = require(gulp-sass);var concat = require(gulp-concat);var uglify = require(gulp-uglify);var cssmin = require(gulp-minify-css);var rename = require(gulp-rename);var browserSync = require(browser-sync).create();/检查JS脚本gulp.task(lint,function() gulp.src(app/scripts/*.js) .pipe(jshint() .pipe(jshint.reporter(default););/编译sass 读取 编译 输出到新文件夹中gulp.task(sass,function() gulp.src(app/scss/*.scss) .pipe(sass() .pipe(gulp.dest(app/css););/合并压缩文件gulp.task(scripts,function() /读取JS文件，合并，输出到新目录，重新命名，压缩，输出 gulp.src(app/scripts/*.js) .pipe(concat(all.js) .pipe(gulp.dest(app/dist) .pipe(rename(all.min.js) .pipe(uglify() .pipe(gulp.dest(app/dist); /读取CSS文件，合并，输出到新目录，重新命名，压缩，输出 gulp.src(app/css/*.css) .pipe(concat(all.css) .pipe(gulp.dest(app/dist) .pipe(rename(all.min.css) .pipe(cssmin() .pipe(gulp.dest(app/dist););/服务器插件中，监视文件并自动刷新gulp.task(serve, function() browserSync.init( server: baseDir: app ); gulp.watch(app/scripts/*.js,app/scss/*.scss,app/*.html,function() gulp.run(lint,sass,scripts); browserSync.reload(); ););/默认行为,直接调用服务器gulp