jslint(JSlint检查会降低我们构建速度,所以本地构建应该去掉)
gulp压缩整站方法（html/css/js/image）
注入package.json(此json文件需要自己在当前项目目录下创建即可--不能有注释)安装：
npm install gulp-uglify --save-dev
全局安装：
npm install gulp-uglify -g
整站静态文件压缩配置文件gulpfile.js（html/css/image/js; 前提是安装下列require用到的模块）：
var gulp = require('gulp'),//基础库
? ? htmlmin = require('gulp-htmlmin'),//html压缩
cssmin = require('gulp-minify-css'),//css压缩
jshint = require('gulp-jshint'),//js检查
uglify = require('gulp-uglify'),//js压缩
imagemin = require('gulp-imagemin'),//图片压缩
? ? pngquant = require('imagemin-pngquant'),//图片深入压缩
imageminOptipng = require('imagemin-optipng'),
? ? imageminSvgo = require('imagemin-svgo'),
? ? imageminGifsicle = require('imagemin-gifsicle'),
? ? imageminJpegtran = require('imagemin-jpegtran'),
domSrc = require('gulp-dom-src'),
cheerio = require('gulp-cheerio'),
processhtml = require('gulp-processhtml'),
Replace = require('gulp-replace'),
cache = require('gulp-cache'),//图片压缩缓存
clean = require('gulp-clean'),//清空文件夹
conCat = require('gulp-concat'),//文件合并
plumber=require('gulp-plumber'),//检测错误
gutil=require('gulp-util');//如果有自定义方法，会用到
var date = new Date().getTime();
gulp.task('clean',function(){
return gulp.src('min/**',{read:false})
.pipe(clean());
});
function errrHandler( e ){
? ? // 控制台发声,错误时beep一下
? ? gutil.beep();
? ? gutil.log(e);
this.emit('end');
}
gulp.task('cleanCash', function (done) {//清除缓存
? ? return cache.clearAll(done);
});
gulp.task('htmlmin', function () {
? ? var options = {
? ? ? ? removeComments: true,//清除HTML注释
? ? ? ? collapseWhitespace: true,//压缩HTML
? ? ? ? collapseBooleanAttributes: false,//省略布尔属性的值 input checked="true"/ == input /
? ? ? ? removeEmptyAttributes: false,//删除所有空格作属性值 input id="" / == input /
? ? ? ? removeScriptTypeAttributes: true,//删除script的type="text/javascript"
? ? ? ? removeStyleLinkTypeAttributes: true,//删除style和link的type="text/css"
? ? ? ? minifyJS: true,//压缩页面JS
? ? ? ? minifyCSS: true//压缩页面CSS
? ? };
? ? gulp.src(['index/*.htm','index/*.html'])
.pipe(plumber({errorHandler:errrHandler}))
.pipe(Replace(/_VERSION_/gi, date))
.pipe(processhtml())
? ? ? ? .pipe(htmlmin(options))
? ? ? ? .pipe(gulp.dest('min'));
});
gulp.task('cssmin', function(){
? ? gulp.src('index/**/*.css')
.pipe(conCat('css/index.min.css'))
.pipe(plumber({errorHandler:errrHandler}))
? ? ? ? .pipe(cssmin({
? ? ? ? ? ? advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
? ? ? ? ? ? compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
? ? ? ? ? ? keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]
? ? ? ? ? ? keepSpecialComments: '*'
? ? ? ? ? ? //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
? ? ? ? }))
? ? ? ? .pipe(gulp.dest('min'));
});
gulp.task('jsmin', function () {
? ? gulp.src(['index/js/*.js','!index/**/{text1,text2}.js'])
.pipe(conCat('js/index.min.js'))
.pipe(plumber({errorHandler:errrHandler}))
? ? ? ? .pipe(uglify({
? ? ? ? ? ? mangle: {except: ['require' ,'exports' ,'module' ,'$']},//类型：Boolean 默认：true 是否修改变量名
? ? ? ? ? ? compress: true,//类型：Boolean 默认：true 是否完全压缩
? ? ? ? ? ? preserveComments: 'false' //保留所有注释
? ? ? ? }))
? ? ? ? .pipe(gulp.dest('min'));
});?
gulp.task('imagemin', function () {
? ? gulp.src('index/**/*.{png,jpg,gif,ico}')
.pipe(plumber({errorHandler:errrHandler}))
? ? ? ? .pipe(cache(imagemin({
? ? ? ? ? ? progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片? ? ? ? ?
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
? ? ? ? ? ? use: [pngquant(),imageminJpegtran({progressive: true})
? ? ? ? ? ? , imageminGifsicle({interlaced: true}),imageminOptipng({optimizationLevel:3}), imageminSvgo()] //使用pngquant深度压缩png图片的imagemin插件? ? ? ? ?
? ? ? ? })))
? ? ? ? .pipe(gulp.dest('min'));
});
gulp.task('default',['clean'],function(){
gulp.start('cssmin','htmlmin','jsmin','imagemin');
});
package.json(例子) package.json详细介绍：
（package.json ?npm init 命令行创建文件方法 ）
{
? "name": "web",
? "version": "1.0.0",
? "description": "my text",
? "main": "gulpfile.js",
? "dependencies": {
? ? "gulp": "^3.9.1",
? ? "gulp-cache": "^0.4.5",
? ? "gulp-concat": "^2.6.0",
? ? "gulp-htmlmin": "^2.0.0",
? ? "gulp-imagemin": "^3.0.1",
? ? "gulp-jshint": "^2.0.1",
? ? "gulp-minify-css": "^1.2.4",
? ? "gulp-plumber": "^1.1.0",
? ? "gulp-uglify": "^1.5.4",
? ? "gulp-util": "^3.0.7",
? ? "imagemin-pngquant": "^5.0.0",
? ? "jshint": "^2.9.2",
? ? "gulp-clean": "^0.3.2"
? },
? "devDependencies": {
? ? "gulp-cheerio": "^0.6.2",
? ? "gulp-dom-src": "^0.2.0",
? ? "gulp-jslint": "^1.0.1",
? ? "gulp-processhtml": "^1.1.0",
? ? "gulp-rename": "^1.2.2",
? ? "gulp-replace": "^0.5.4",
? ? "gulp-webpack": "^1.5.0",
? ? "imagemin-gifsicle": "^5.1.0",
? ? "imagemin-jpegtran": "^5.0.2",
? ? "imagemin-optipng": "^5.1.1",
? ? "imagemin-svgo": "^5.1.0",
? ? "webpack": "^1.13.1"
? },
? "scripts": {
? ? "test": "echo \"Error: no test specified\" exit 1"
? },
? "keywords": [
? ? "web"
? ],
? "author": "yl",
? "license": "ISC"
}
devDependencies里的内容即为你安装gulp的模块插件名称和版本号！
最后，node.js里指定到当前项目目录下输入gulp命令即可：
gulp default
notepad怎么加jslint
一.安装JSLint插件 1.安装Notepad++, 2.安装JSLint插件 打开Notepad++,在插件-插件管理(Plugin Manager)中
怎么在eclipse安装jslint
方法一：
?
Step One: Open Eclipse up on your machine and go to ‘Help’ - ‘Install New Software’
Step Two: Click ‘add’ and to stuff the location with the following link:
?
then click ‘ok’.
Step Three: Selecting ‘Javascript Development Tools’ and ‘jslint4java’ and click next.
方法二：
?
Step One: Download jslint4java
Step Two: Put jslint4java.jar somewhere
Step Three: Add an external tool configuration in Eclipse:
Location: /usr/bin/java(or your path to javaw.exe)
Arguments: -jar /path/to/jslint4java.jar ${resource_loc}
方法三：
?
1. Help - Install new software
2. Click the 'Add' button
Name : Rockstar Apps (or whatever you want)
Location :
3. expend the selection and check Rockstar JsLint
4. Click 'Next'...again
5. Accept and install
(you'll have to hit okay when it prompts you about installing unsigned content).
6. Restart Eclipse...
请教如何在phpStorm中配置eslint
使用ESlint
一、ESLint跟JSLint和JSHint类似，但有以下区别：
1.使用Espree进行js解析(parse)
2.用AST抽象语法树去识别(evaluate)代码中的模式3.每个规则都是独立的插件
二、安装
全局安装：
npm install -g eslint
三、使用
如果是第一次使用，eslint --init 命令帮你完成初始化，生成.eslintrc文件然后eslint test.js test2.js
四、配置
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
提示有三个level：
"off" or 0 - 关闭这个规则校验
"warn" or 1 - 开启这个规则校验，但只是提醒，不会退出"error" or 2 - 开启这个规则校验，并退出
五、常见问题
1.为什么不用jslint
创建eslint是因为急需插件化的校验工具如果你还不明白的话，你可以在后盾人平台看看教材视频，多看看几遍，慢慢的不就会了，如果嫌弃麻烦，你可以直接去后盾人线下面授培训问问那些专家讲师，他们很乐意帮你的，希望能帮到你，给个采纳吧谢谢(*°?°)=3